:root{
  --green:#1F8A7A; --green-deep:#0F6B5E; --green-soft:#E6F4F1; --green-line:#CFE5E1;
  --orange:#F5A524; --yellow:#FACC15; --red:#E5484D; --gray:#6B7280; --line:#E5E7EB; --line2:#F1F5F4;
  --bg:#F7FAF8; --card:#FFFFFF; --text:#0F172A; --text2:#64748B;
  --s1:#10B981; --s2:#F59E0B; --s3:#F97316; --s4:#EF4444;
  --shadow:0 1px 2px rgba(15,107,94,.06), 0 4px 16px rgba(15,107,94,.04);
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:14px}
svg{display:block}

/* ===== 顶部 NavBar ===== */
.nav{position:sticky;top:0;z-index:50;background:var(--green);color:#fff;padding:0 20px;height:54px;display:flex;align-items:center;gap:16px;box-shadow:0 2px 8px rgba(15,107,94,.18)}
.nav .logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;letter-spacing:.5px}
.nav .logo svg{width:20px;height:20px}
.nav-tabs{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tabs button{padding:6px 12px;color:#cfe5e1;border-radius:6px;font-size:13px;white-space:nowrap;transition:all .15s;display:flex;align-items:center;gap:6px}
.nav-tabs button:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-tabs button.active{background:#fff;color:var(--green-deep);font-weight:600}
.nav-tabs .dot{width:6px;height:6px;border-radius:50%;background:var(--s4);display:inline-block}
.nav-tabs .dot.p0{background:var(--s4)}.nav-tabs .dot.p1{background:var(--s2)}.nav-tabs .dot.p2{background:var(--gray)}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-right .syn{font-size:11px;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.15)}
.nav-right .syn.ok{background:#10B981}
/* v24：真实同步失败的常驻提醒（点它打开数据同步面板）。
   ⚠️ 以前这里只有"保存中…"一闪而过，同步坏了也看不出来。 */
.nav-right .syn.warn{background:var(--orange);color:#412402;cursor:pointer;white-space:nowrap}
.nav-right .syn.warn:hover{opacity:.9}
.nav-right button{color:#fff;padding:6px 10px;border-radius:6px;font-size:12px;display:flex;align-items:center;gap:4px}
.nav-right button:hover{background:rgba(255,255,255,.12)}

/* ===== 布局：模块导航 + 子菜单 + 内容 三列 ===== */
.layout{
  display:grid;grid-template-columns:134px 188px 1fr;
  min-height:calc(100vh - 54px);
  /* v11：折叠的动画改由网格列宽过渡驱动，但二级栏收起时列数会变，
     列数变化没法平滑插值，所以过渡只留给「一级栏 134↔56」这一种情况 */
  transition:grid-template-columns .18s var(--ease,ease);
}

/* 模块导航（原来在顶栏横排，v3 挪到左侧竖排） */
.modnav{
  background:#f7faf9;border-right:1px solid var(--line);
  padding:10px 7px;position:sticky;top:54px;height:calc(100vh - 54px);overflow-y:auto;
}
.modnav button{
  width:100%;display:flex;align-items:center;gap:7px;
  padding:8px 9px;border-radius:8px;margin-bottom:2px;
  font-size:12.5px;color:#3f4e4a;text-align:left;line-height:1.35;
  transition:all .12s;white-space:nowrap;overflow:hidden;
}
.modnav button:hover{background:var(--green-soft);color:var(--green-deep)}
.modnav button.active{background:var(--green-deep);color:#fff;font-weight:600}
.modnav .dot{width:6px;height:6px;border-radius:50%;flex:none}
/* v20：一级栏角标。
   ⚠️ 原来「催款系统 ·1」是把数字**拼进 .mt 文本**里的 —— 134px 装不下，
      会被 ellipsis 截成「催款系...」（本项目踩过多次的窄列坑）。
      改成绝对定位的小徽标：不占文本宽度，模块名完整显示。
      手机抽屉里那套（.drawer-body .dmod .mc）是同一个思路。 */
.modnav button{position:relative;}
.modnav .mc{
  position:absolute; top:3px; right:3px;
  min-width:15px; height:15px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; background:var(--s4); color:#fff;
  font-size:10px; font-weight:700; font-style:normal;
  font-variant-numeric:tabular-nums;
}
.modnav button.active .mc{ background:#fff; color:var(--green-deep); }
/* 一级栏收成 56px 图标条时，角标会挤在图标上 → 藏掉
   （收起态本来也看不到模块名，徽标没有意义） */
.layout.root-collapsed .modnav .mc{ display:none; }
.modnav .mi{display:inline-flex;width:15px;height:15px;flex:none;align-items:center;justify-content:center}
.modnav .mi svg{width:15px;height:15px}

/* ---- v11：左侧两级各自独立折叠 ----
   一级栏（模块导航）收起 → 只瘦身自己，二级栏宽度不动
   二级栏（子菜单）收起 → 整列退出网格，内容区占满
   要点：绝不出现「宽度 0 但仍在布局流里」的网格列 —— 那会把中文压成竖排 */
.navfold{
  width:100%;display:flex;align-items:center;justify-content:center;
  padding:4px 0;margin-bottom:7px;border-radius:7px;
  background:transparent;border:0;color:#8a9a95;cursor:pointer;
  font-size:14px;line-height:1;transition:.15s;
}
/* ⚠️ v31 修正：原来这里是 `.modnav .navfold + button{ margin-top:6px; }`，
   想解决「今天要处理」的角标被压住 —— **诊断错了**，真正的问题是
   「角标压住了模块名本身」：`.mc` 绝对定位 right:3px，而 `.mt` 里
   5 个字的模块名在 120px 按钮里排完刚好顶到角标底下，
   截图上是 4 压在「理」字上面（短名模块如「客户名库」看不出问题）。
   正确修法：**只给带角标的按钮**预留角标宽度，并让 `.mt` 自己截断。
   —— 不动 .mc 的绝对定位（它是为了不占文本宽度才这么写的，见上）。
   ⚠️ 预留量必须算准，别拍脑袋给 23px：
     按钮 120 − 左 padding 9 − 预留 P = 文字可用宽
     再减 .dot(6) + gap(7) + .mi(15) + gap(7) = 35
     ⇒ 文字可用 = 76 − P。角标 min-width 15 + right 3 + 留给它的呼吸 3 = 21。
     P=21 ⇒ 文字 55px，放得下 4 个 12.5px 汉字(≈50px)。
   ⚠️ 所以模块名统一压到 **4 个汉字以内**（「今日指挥台」）。
     5 字必然截断成「今日指…」，比原来角标压字更难读。 */
.modnav button:has(.mc){ padding-right:21px; }
.modnav .mt{ min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.navfold:hover{background:var(--green-soft);color:var(--green-deep)}

/* 一级栏收起：134px → 56px 图标条（56 而不是 44：缩放到 100% 时 44 会落进
   44~48 的分界区间，图标和状态点会一起被挤） */
.layout.root-collapsed{grid-template-columns:56px 188px 1fr}
.layout.root-collapsed .modnav{padding:8px 4px}
.layout.root-collapsed .modnav button{justify-content:center;padding:9px 0;gap:0}
.layout.root-collapsed .modnav .dot,
.layout.root-collapsed .modnav .mt{display:none}
.layout.root-collapsed .modnav .mi,
.layout.root-collapsed .modnav .mi svg{width:18px;height:18px}

/* 二级栏收起：三列变两列（把中间那列整个撤掉，而不是设成 0 宽），
   内容区直接占满一级栏右侧 —— 这才是真正的「让位」 */
.layout.sub-collapsed{grid-template-columns:134px 1fr}
.layout.sub-collapsed.root-collapsed{grid-template-columns:56px 1fr}
.layout.sub-collapsed .subnav{display:none !important}

/* 二级栏收起后，展开按钮浮在内容区左上角的细竖条 */
.subnav-reopen{
  display:none;
  align-items:center;justify-content:center;
  position:absolute;left:0;top:14px;z-index:30;
  width:22px;height:34px;
  border:1px solid var(--line);border-left:0;border-radius:0 7px 7px 0;
  background:#fff;color:#8a9a95;cursor:pointer;font-size:12px;line-height:1;
  transition:.15s;
}
.subnav-reopen:hover{background:var(--green-soft);color:var(--green-deep)}
.layout.sub-collapsed .main{ position:relative; }
.layout.sub-collapsed .subnav-reopen{ display:flex; }

.subnav{background:#fff;border-right:1px solid var(--line);padding:14px 8px;position:sticky;top:54px;height:calc(100vh - 54px);overflow-y:auto}
/* 二级栏自己的收起箭头（一级栏那个管一级，各管各的） */
.navfold-sub{
  width:100%;display:flex;align-items:center;justify-content:center;
  padding:4px 0;margin:0 0 6px;border-radius:7px;
  background:transparent;border:0;color:#8a9a95;cursor:pointer;
  font-size:13px;line-height:1;transition:.15s;
}
.navfold-sub:hover{background:var(--green-soft);color:var(--green-deep)}
/* 二级栏收起时它自己被隐藏，按钮跟着消失（展示由内容区左上角那条接管） */
.layout.sub-collapsed .navfold-sub{display:none}

/* ---- v3：设置按钮上的「未同步」小黄点（平时不显示） ---- */
.sync-dot{
  width:7px;height:7px;border-radius:50%;background:#F59E0B;
  display:inline-block;margin-left:2px;vertical-align:middle;
  box-shadow:0 0 0 2px rgba(245,158,11,.25);
}

/* ---- v3：手机上三列塌成一列，模块导航转成横向滚动条 ---- */
/* ===================================================================
   v19：手机端左侧抽屉导航
   -------------------------------------------------------------------
   李想原话：「镶嵌的工作台版式还是没有做好手机端……手机端的话做成和
             电脑端的左边折叠吧」
   真因（v18 线上截图核对）：< 900px 时共有 **4 层横条**压在内容上方 ——
     ① .nav 顶栏（绿）
     ② .modnav 模块条（到货系统/发货系统/云南货品…）
     ③ .subnav 子菜单条（position:fixed 横滑）
     ④ 子应用自己的 .topbar + .tabs（inlay / tag 的 Shadow DOM 内部）
   内容因此被顶到第 5 屏。历次「手机端适配」只动了字号与留白，从没动这
   4 层横条的结构，所以李想看「没有变化」——他说的对。
   现在：② ③ 两层横条**在手机上彻底取消**，改为左侧抽屉（和电脑端同构），
   ④ 层留给子应用自己（那是镶嵌模块的内部工具条，不属于工作台导航）。
   =================================================================== */
.drawer-scrim{ display:none; }
.drawer{ display:none; }

/* 顶部栏里的汉堡按钮：桌面端隐藏（桌面有常驻左栏，不需要抽屉） */
.nav-burger{
  display:none; flex:0 0 auto;
  width:38px; height:38px; padding:0; margin-right:2px;
  align-items:center; justify-content:center;
  color:#fff; border-radius:8px;
}
.nav-burger:hover{ background:rgba(255,255,255,.14); }

@media (max-width:900px){
  /* ---------- 1. 顶栏：只留「汉堡 + 标题 + 右侧图标」，单行不换行 ---------- */
  .nav-burger{ display:flex; }
  .nav{
    flex-wrap:nowrap;            /* v19：不再需要第二行放模块条 → 取消换行 */
    height:auto; min-height:52px;
    gap:6px;
  }
  /* 手机端模块条彻底隐藏（模块选择已进抽屉） */
  .nav-tabs{ display:none !important; }

  /* ---------- 2. 布局：真正的单列，不再为固定横条让位 ---------- */
  .layout{
    grid-template-columns:1fr;
    min-height:calc(100vh - var(--navh,52px));
    min-height:calc(100dvh - var(--navh,52px));
    padding-top:0;               /* v19：子菜单条没了，不需要让位 */
  }
  /* 左栏两列在手机端隐藏 —— 它们的内容由抽屉承载 */
  .modnav{ display:none !important; }
  .subnav{ display:none !important; }
  .navfold, .subnav-reopen{ display:none !important; }
  .main{ padding:12px 12px calc(24px + var(--sab)); }

  /* ---------- 3. 抽屉本体 ---------- */
  .drawer-scrim{
    display:block; position:fixed; inset:0; z-index:70;
    background:rgba(6,26,22,.42);
    opacity:0; pointer-events:none; transition:opacity .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  body.drawer-open .drawer-scrim{ opacity:1; pointer-events:auto; }

  .drawer{
    display:flex; flex-direction:column;
    position:fixed; z-index:80;
    top:0; bottom:0; left:0;
    width:min(78vw, 300px);
    background:#fff;
    border-right:1px solid var(--line);
    box-shadow:0 0 32px rgba(6,26,22,.20);
    transform:translateX(-102%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
    padding-top:var(--sat,0px);          /* 让开刘海 */
    will-change:transform;
  }
  body.drawer-open .drawer{ transform:translateX(0); }

  .drawer-head{
    flex:0 0 auto; display:flex; align-items:center; gap:8px;
    padding:13px 14px; border-bottom:1px solid var(--line);
    font-size:15px; font-weight:700; color:var(--text);
  }
  .drawer-x{
    margin-left:auto; width:36px; height:36px; padding:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:8px; color:var(--text2);
  }
  .drawer-x:active{ background:var(--line2); }

  /* ---------- 3b. v20：单列手风琴（取代 v19 的左右两栏） ----------
     ⚠️ 改单列后，原来专为窄列服务的补丁集体退休：
        「130px 刚好放下四个字」「.mc 绝对定位避免挤掉模块名」
        「右栏只有 2 项、底下一大片留白」。
        现在整条抽屉 min(86vw, 320px) 宽，模块名再也压不成竖排。
     ⚠️ 但 .mt 的 nowrap 保留 —— 单列不会竖排，可万一将来加长模块名，
        截断成省略号比被压成一字一列好排查得多。 */
  .drawer-body{
    flex:1 1 auto; min-height:0;
    padding:8px 8px calc(10px + var(--sab));
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }

  /* 模块行：整行可点，点它原地展开子项（手风琴，自动收起上一个） */
  .drawer-body .dmod{
    width:100%; display:flex; align-items:center; gap:8px;
    /* min-height 而不是固定 height：字号放大时不会把字挤掉 */
    min-height:46px;
    padding:10px 10px; border-radius:9px;
    font-size:14px; color:var(--text); text-align:left;
    transition:.15s var(--ease);
  }
  .drawer-body .dmod:active{ background:var(--line2); }
  .drawer-body .dmod.active{ background:var(--green-soft); color:var(--green-deep); font-weight:600; }
  .drawer-body .dmod .mi{ display:inline-flex; width:16px; height:16px; flex:none; align-items:center; justify-content:center; }
  .drawer-body .dmod .mi svg{ width:16px; height:16px; }
  .drawer-body .dmod .dot{ width:6px; height:6px; border-radius:50%; flex:none; }
  .drawer-body .dmod .mt{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* 计数徽标：单列有宽度了，不用再绝对定位 —— 排进流里，不压模块名 */
  .drawer-body .dmod .mc{
    flex:0 0 auto; min-width:17px; height:17px; padding:0 5px;
    display:flex; align-items:center; justify-content:center;
    border-radius:9px; background:var(--s4); color:#fff;
    font-size:10.5px; font-weight:700; font-style:normal;
    font-variant-numeric:tabular-nums;
  }
  /* 展开箭头：收起指下、展开指上 */
  .drawer-body .dchev{ flex:0 0 auto; display:inline-flex; color:var(--text2); transition:transform .18s var(--ease); }
  .drawer-body .dchev svg{ width:13px; height:13px; }
  .drawer-body .dgroup.open .dchev{ transform:rotate(180deg); }

  /* 子项：缩进一级，左侧一条细线把「归属哪个模块」画出来 */
  .drawer-body .dsubs{ padding:0 0 5px 10px; margin-left:12px; border-left:1px solid var(--line); }
  .drawer-body .dsubs[hidden]{ display:none; }
  .drawer-body .dsubs .item{
    display:flex; align-items:center; gap:8px;
    padding:11px 10px; border-radius:8px; margin-bottom:2px;
    font-size:13.5px; color:var(--text); cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .drawer-body .dsubs .item:active{ background:var(--line2); }
  .drawer-body .dsubs .item.active{ background:var(--green-soft); color:var(--green-deep); font-weight:600; }
  .drawer-body .dsubs .item .badge{ margin-left:auto; }
  /* 子项里的 svg 是模块图标，缩进后不需要重复显示（窄） */
  .drawer-body .dsubs .item > svg{ display:none; }
  /* 相邻分组之间一条发丝线 —— 全收起时也能看清分了几个模块 */
  .drawer-body .dgroup + .dgroup{ border-top:1px solid var(--line2); margin-top:2px; padding-top:2px; }

  /* 抽屉打开时锁住背景滚动 */
  body.drawer-open{ overflow:hidden; }

  /* ---------- 4. 子应用宿主：不再扣子菜单条的高度 ---------- */
  #inlayHost, #tagHost{
    grid-column:1; grid-row:auto;
    height:calc(100vh  - var(--navh,52px));
    height:calc(100dvh - var(--navh,52px));
    padding-top:0;
  }
  #tagHost{ overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; }
}

/* ===================================================================
   ⚠️⚠️ v20b：这里原来还有**一整块 v19 之前的旧手机端设计** ——
     `.modnav` 横向滚动条 / `.subnav` 横向子菜单条 / 折叠态特殊处理。
     v19 改成左侧抽屉后，这些职责已被上面那块（167 行起）完全取代，
     但**没删干净**，留了一颗只在特定状态下引爆的地雷：

       .layout.sub-collapsed .subnav{ display:flex !important }

     选择器特异性 (0,2,1) 高于上面那块主的 `.subnav{display:none!important}` (0,1,0)，
     两条都是 !important → **优先级高的赢** → 手机端子菜单条复活。
     触发条件：`.layout` 带 `sub-collapsed`，也就是
     **「用户曾经在电脑上点过子菜单栏的「«」收起」** —— 这个状态存在
     localStorage(`wb_nav_sub_collapsed`)，会跟着用户到手机上。

     2026-09-18 用户实测截图：到货/发货/客户名库顶部多出一条横条（内容被推低 79px）；
     **镶嵌报价更惨** —— 子菜单条被压成 115px 的竖排条、内容区只剩 287px。

     为什么测试一直全绿：本地测试用的是干净的 localStorage，永远走「无 sub-collapsed」
     那条路。**这是典型的「状态组合漏测」** —— 现已补断言：
     手机端 + sub-collapsed=1 时 subnav 仍必须 display:none（见 test_v3ws.mjs）。

     现在只保留「折叠态在手机端也必须单列」这一条兜底 ——
     ⚠️ 它不能省：桌面块（104 行）的 `.layout.sub-collapsed{134px 1fr}` 特异性同为 (0,2,0)，
        没有这条手机端会退回成两列。
   =================================================================== */
@media (max-width:900px){
  .layout.root-collapsed,
  .layout.sub-collapsed,
  .layout.sub-collapsed.root-collapsed{
    grid-template-columns:1fr;
  }
}
.subnav h6{margin:14px 8px 6px;font-size:11px;color:var(--text2);font-weight:600;letter-spacing:.8px;text-transform:uppercase}
.subnav h6:first-child{margin-top:4px}
.subnav .item{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13px;border-radius:6px;color:#334155;cursor:pointer;margin-bottom:1px;transition:all .12s}
.subnav .item:hover{background:var(--green-soft);color:var(--green-deep)}
.subnav .item.active{background:var(--green-soft);color:var(--green-deep);font-weight:600}
.subnav .item svg{width:14px;height:14px;flex-shrink:0}
.subnav .item .badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;padding:1px 6px;border-radius:99px;line-height:1.4}
.main{padding:18px 22px;min-width:0}

/* ===== 顶部今日要处理 ===== */
.today{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow)}
.today h3{margin:0 0 10px;font-size:14px;display:flex;align-items:center;gap:6px}
.today h3 svg{width:14px;height:14px;color:var(--orange)}
.today-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.today-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--line2);border-radius:8px;font-size:13px}
.today-item .num{font-size:18px;font-weight:700;color:var(--red);min-width:34px;text-align:center}
.today-item .num.warn{color:var(--orange)}
.today-item .num.ok{color:var(--s1)}
.today-item .label{flex:1;color:#334155}
.today-item .btn{padding:3px 8px;border-radius:4px;background:var(--green);color:#fff;font-size:11px}
.today-item .btn:hover{background:var(--green-deep)}

/* ===== 模块视图标题 ===== */
.section{display:flex;align-items:baseline;gap:10px;margin:4px 0 12px}
.section h2{margin:0;font-size:20px;font-weight:700}
.section .sub{color:var(--text2);font-size:12px}
.section .status{padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600}
.section .status.p0{background:#FEE2E2;color:#B91C1C}
.section .status.p1{background:#FEF3C7;color:#B45309}
.section .status.p2{background:#DBEAFE;color:#1D4ED8}
.section .status.p1b{background:#E0E7FF;color:#4338CA}
.section .right{margin-left:auto;display:flex;gap:6px}
.btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:6px;background:var(--green);color:#fff;font-size:12px;border:1px solid transparent}
.btn:hover{background:var(--green-deep)}
.btn.ghost{background:#fff;color:var(--green-deep);border-color:var(--green-line)}
.btn.ghost:hover{background:var(--green-soft)}
.btn.warn{background:var(--red)}
.btn svg{width:12px;height:12px}

/* ===== 卡片网格（指标卡 + 订单/批次卡） ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.kpi .label{font-size:11px;color:var(--text2);margin-bottom:4px}
.kpi .num{font-size:22px;font-weight:700;color:var(--text)}
.kpi.danger .num{color:var(--red)}
.kpi.warn .num{color:var(--orange)}
.kpi.ok .num{color:var(--s1)}
.kpi .delta{font-size:10px;margin-top:2px;color:var(--text2)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;transition:all .15s}
.card:hover{box-shadow:var(--shadow);border-color:var(--green-line)}
.card h4{margin:0 0 8px;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card h4 .tag{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:500}
.tag.s1{background:#D1FAE5;color:#065F46}
.tag.s2{background:#FEF3C7;color:#92400E}
.tag.s3{background:#FFEDD5;color:#9A3412}
.tag.s4{background:#FEE2E2;color:#991B1B}
.tag.s0{background:#E0F2FE;color:#075985}
.tag.gray{background:#F1F5F4;color:#475569}
.tag.warn{background:#FEE2E2;color:#991B1B}
.tag.ok{background:#D1FAE5;color:#065F46}
.card .row{display:flex;justify-content:space-between;font-size:12px;color:#475569;padding:3px 0;border-top:1px dashed var(--line2)}
.card .row:first-of-type{border-top:none}
.card .row .k{color:var(--text2)}
.card .row .v{font-weight:600}
.card .row.overdue .v{color:var(--red)}

/* 可用平台芯片（中国大陆/中国台湾/MY 等区域按 IM 平台展示） */
.platform-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;line-height:1.5;background:var(--green-soft);color:var(--green-deep);border:1px solid var(--green-line)}
.platform-chip.wechat{background:#E7F8EC;color:#1AAD19}
.platform-chip.line{background:#E5F8E9;color:#06C755}
.platform-chip.whatsapp{background:#E4F8EC;color:#25D366}
.platform-chip.zalo{background:#E6EFFF;color:#0068FF}
.platform-chip.facebook{background:#E7F0FE;color:#1877F2}
.platform-chip.phone{background:#F1F5F4;color:#475569}
.platform-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;padding-top:4px;border-top:1px dashed var(--line2)}
.muted{color:var(--text2);font-size:11px}

/* 发货方式芯片 + 单订单行的发货方式切换 */
.ship-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;line-height:1.5}
.ship-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:11px;color:var(--text2)}
.ship-row b{color:var(--text);font-weight:500}
.ship-mode-pick{display:inline-flex;gap:3px;margin-left:6px;flex-wrap:wrap}
.ship-mode-pick button{padding:2px 7px;border:1px solid var(--line);border-radius:99px;font-size:10px;background:#fff;color:var(--text2);cursor:pointer;transition:all .15s}
.ship-mode-pick button:hover{background:var(--green-soft);color:var(--green-deep)}
.ship-mode-pick button.on{background:var(--green);color:#fff;border-color:var(--green)}

/* 新增催款客户弹窗 */
.nc-form{display:grid;gap:10px;font-size:13px}
.nc-form label{font-size:12px;color:var(--text2);display:block;margin-bottom:4px}
.nc-form label .required{color:var(--red);margin-left:2px}
.nc-form input,.nc-form select{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;background:#fff;box-sizing:border-box}
.nc-form fieldset{border:1px dashed var(--line);border-radius:6px;padding:8px 12px;margin:0}
.nc-form fieldset legend{font-size:11px;color:var(--text2);padding:0 4px}
.nc-form .row2{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;gap:6px}
.nc-form .platforms{display:flex;flex-wrap:wrap;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:#fff}
.nc-form .platforms label{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--text);margin:0;cursor:pointer}
.nc-form .platforms input{margin:0;width:auto}
.nc-form .hint{font-size:11px;color:var(--text2);margin-top:6px}
.nc-form .foot{display:flex;gap:8px;margin-top:14px}
.nc-form .foot .btn{flex:1;justify-content:center}
.nc-form .fx-grid{display:grid;gap:8px}
.nc-form .fx-row{display:grid;grid-template-columns:80px 120px 1fr;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:#FAFAFA}
.nc-form .fx-row label{margin:0;font-size:13px}
.nc-form .fx-row input{padding:5px 8px;font-size:13px;width:100%}
.nc-form .fx-row input:disabled{background:#F3F4F6;color:var(--text2)}
.nc-form .src-tabs{display:flex;gap:6px;background:#F3F4F6;padding:4px;border-radius:8px}
.nc-form .src-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 6px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text2);transition:all 0.15s}
.nc-form .src-tab.active{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.nc-form .src-tab input{display:none}
.nc-form .img-previews{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:10px}
.nc-form .img-thumb{position:relative;width:64px;height:64px;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#F3F4F6}
.nc-form .img-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nc-form .img-thumb .x{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,0.6);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1}

/* 表格视图 */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid var(--line);font-size:12px}
.tbl th{background:var(--green-soft);color:var(--green-deep);padding:8px 10px;text-align:left;font-weight:600;font-size:11px;border-bottom:1px solid var(--green-line)}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:#FAFCFB}

/* 工具栏 */
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;min-width:0}
.toolbar input{flex:1;min-width:140px}
.toolbar .chip{padding:4px 10px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:11px;cursor:pointer}
.toolbar .chip.on{background:var(--green);color:#fff;border-color:var(--green)}
.toolbar .pill{padding:3px 8px;border-radius:4px;font-size:11px;color:#fff;background:var(--green)}

/* 联动 Toast */
.toast-wrap{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:100}
.toast{background:#0F172A;color:#fff;padding:10px 14px;border-radius:8px;font-size:12px;max-width:320px;box-shadow:0 8px 24px rgba(0,0,0,.18);animation:slip .3s ease}
.toast b{color:#10B981}

/* ---------- 订单管理（对齐小程序订单页） ---------- */
.orders-head{margin-bottom:14px}
.cur-bar{margin-top:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--text2)}
.cur-label{font-weight:600;color:#334155}
.cur-chip{background:#F1F5F9;color:#0F172A;padding:3px 9px;border-radius:99px;font-family:monospace;font-size:11px;border:1px solid var(--line)}
.cur-chip.empty{color:var(--text2);font-style:italic}

.orders-list{display:flex;flex-direction:column;gap:18px}
.date-group{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.date-h{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.date-tag{font-size:15px;font-weight:700;color:#0F172A;font-family:monospace;letter-spacing:.3px}
.date-tag.today{color:var(--green-deep)}
.date-count{font-size:11px;color:var(--text2)}
.date-h .tag{margin-left:auto}

.order-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.order-card{background:#FAFBFC;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .15s;display:flex;flex-direction:column}
.order-card:hover{border-color:var(--green);box-shadow:0 4px 14px rgba(31,138,122,.12);transform:translateY(-1px)}
.img-wrap{position:relative;aspect-ratio:1.6/1;display:flex;align-items:center;justify-content:center}
.sku-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:36px;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.18);letter-spacing:2px}
.pr-badge{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.pr-badge.pa{background:#1F8A7A}.pr-badge.pb{background:#F5A524}.pr-badge.pc{background:#3B82F6}.pr-badge.pd{background:#94A3B8}
.order-body{padding:8px 10px}
.o-name{font-size:13px;font-weight:600;color:#0F172A;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o-sku{font-size:11px;color:var(--text2);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o-foot{display:flex;align-items:baseline;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.o-cur{font-size:14px;font-weight:700;color:var(--green-deep);font-family:monospace}
.o-rmb{font-size:10px;color:var(--text2);font-family:monospace}
.pay-tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;line-height:1.5;margin-left:auto}
.pay-tag.pay-unpaid{background:#FEE2E2;color:#B91C1C}
.pay-tag.pay-ok{background:#D1FAE5;color:#065F46}
.pay-tag.pay-part{background:#FEF3C7;color:#92400E}
.pay-tag.pay-final{background:#DBEAFE;color:#1E40AF}
.o-id{font-size:10px;color:var(--text2);font-family:monospace;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:768px){.order-grid{grid-template-columns:repeat(2,1fr)}.sku-img{font-size:28px}}
@keyframes slip{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ===== 右侧滑出订单明细面板 ===== */
.panel-scrim{position:fixed;inset:0;background:rgba(15,23,42,.35);opacity:0;pointer-events:none;transition:opacity .25s;z-index:55}
.panel-scrim.open{opacity:1;pointer-events:auto}
.side-panel{position:fixed;top:54px;right:0;bottom:0;width:50%;min-width:380px;max-width:680px;background:#fff;box-shadow:-12px 0 32px rgba(15,107,94,.12);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,.0,.2,1);z-index:60;display:flex;flex-direction:column}
.side-panel.open{transform:translateX(0)}
.side-panel .head{flex-shrink:0;padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;background:var(--green-soft)}
.side-panel .head h3{margin:0;font-size:16px;color:var(--green-deep);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.side-panel .head .meta{font-size:11px;color:var(--text2);margin-top:4px}
.side-panel .head .close{background:transparent;border:none;font-size:22px;color:var(--text2);line-height:1;cursor:pointer;padding:6px 10px;border-radius:6px}
.side-panel .head .close:hover{background:rgba(15,23,42,.06)}
.side-panel .body{flex:1;overflow-y:auto;padding:16px 18px;background:#FAFCFB}
.side-panel .body .summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:14px}
.side-panel .body .sum-cell{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:11px}
.side-panel .body .sum-cell .label{color:var(--text2)}
.side-panel .body .sum-cell .v{font-size:14px;font-weight:700;color:var(--green-deep);margin-top:2px}
.order-row{display:flex;gap:10px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;align-items:center;cursor:pointer;transition:all .15s}
.order-row:hover{border-color:var(--green-line);box-shadow:var(--shadow)}
.order-row .thumb{width:48px;height:48px;background:linear-gradient(135deg,#1F8A7A,#0F6B5E);border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600}
.order-row .info{flex:1;min-width:0}
.order-row .info .id{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;gap:6px}
.order-row .info .id b{font-size:13px;font-family:monospace}
.order-row .info .sku{font-size:11px;color:var(--text2);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-row .info .amt{display:flex;justify-content:space-between;align-items:center}
.order-row .info .amt .price{font-weight:700;font-size:13px;color:var(--green-deep)}
.order-row .info .amt .batch{font-size:10px;color:var(--text2);background:var(--line2);padding:1px 6px;border-radius:3px}
.side-panel .foot{flex-shrink:0;padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:space-between;background:#fff}
.side-panel .foot .left{display:flex;gap:8px}
.side-panel .foot .right{display:flex;gap:8px}
@media (max-width:768px){
  .side-panel{width:100%;max-width:100%;min-width:0}
}

/* 模态框 */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:12px;max-width:720px;width:100%;max-height:84vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal h3{margin:0;padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px;display:flex;align-items:center;gap:8px}
.modal .body{padding:18px 20px}
.modal .body label{display:block;margin:10px 0;font-size:12px;color:var(--text2)}
.modal .body input,.modal .body select,.modal .body textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;margin-top:4px}
.modal .body textarea{min-height:70px;resize:vertical}
.modal .foot{padding:12px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--line2)}
.modal .foot button{padding:6px 14px;border-radius:6px;font-size:12px}
.modal .foot .cancel{background:#fff;border:1px solid var(--line);color:#475569}
.modal .foot .ok{background:var(--green);color:#fff}

.empty{padding:40px 20px;text-align:center;color:var(--text2);background:#fff;border:1px dashed var(--line);border-radius:8px}
.empty svg{width:36px;height:36px;margin-bottom:8px;opacity:.4}

/* 加密访问 */
.lock{padding:32px;text-align:center;background:#fff;border-radius:10px;max-width:320px;margin:60px auto}
.lock svg{width:40px;height:40px;color:var(--orange);margin-bottom:12px}
.lock input{margin:10px 0;padding:10px;border:1px solid var(--line);border-radius:6px;width:120px;text-align:center;font-size:18px;letter-spacing:8px}
.lock .hint{font-size:11px;color:var(--text2);margin-top:8px}

/* 时间线 */
.tl{position:relative;padding-left:14px}
.tl-node{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:start;position:relative}
.tl-dot{width:11px;height:11px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);margin-top:5px;margin-left:-19px;flex-shrink:0}
.tl-line{position:absolute;left:-14px;top:18px;width:1px;height:calc(100% - 8px);background:var(--line);margin:0 0 6px 1px}
.tl-time{font-size:11px;font-family:ui-monospace,Menlo,monospace;color:var(--text2);padding-top:3px;white-space:nowrap}
.tl-body{padding-bottom:10px}
.tl-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.tl-who{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:rgba(31,138,122,.08);color:#0F5A4E}
.tl-action{font-size:13px;font-weight:700;color:#1E293B}
.tl-note{font-size:12px;color:#475569;line-height:1.6;padding:2px 0 0 0}

/* 时间线编辑行（表单内） */
.tl-edit{border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff;margin-bottom:6px;display:grid;grid-template-columns:130px 70px 1fr 1fr 28px;gap:6px;align-items:center}
.tl-edit input,.tl-edit select{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:12px;font-family:inherit;background:#fff;color:var(--text);min-width:0}
.tl-edit .del{background:#FEE2E2;color:#B91C1C;border-radius:6px;font-weight:700;cursor:pointer;border:none;padding:0;font-size:14px;width:28px;height:28px}
.tl-edit .del:hover{background:#FCA5A5}

/* 案例记录表单 */
.modal .body .cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal .body .cf-item{display:flex;flex-direction:column;gap:4px;margin:0}
.modal .body .cf-item>span{font-size:11px;font-weight:700;color:#475569;margin:0}
.modal .body .cf-item input,.modal .body .cf-item select,.modal .body .cf-item textarea{border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:12px;font-family:inherit;background:#fff;color:var(--text);margin:0;min-height:0}
.modal .body .cf-item textarea{resize:vertical;line-height:1.6;min-height:60px}
.modal .body .cf-item input:focus,.modal .body .cf-item select:focus,.modal .body .cf-item textarea:focus{outline:none;border-color:var(--green)}
.modal .body .cf-drop{border:1.5px dashed var(--line);border-radius:8px;padding:14px 10px;font-size:12px;color:var(--text2);text-align:center;cursor:pointer;transition:.15s}
.modal .body .cf-drop:hover{border-color:var(--green);color:var(--green-deep);background:var(--green-soft)}
.cf-pre{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.cf-thumb{position:relative;width:64px;height:64px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.cf-thumb img{width:100%;height:100%;object-fit:cover}
.cf-thumb button{position:absolute;top:0;right:0;width:16px;height:16px;border:none;border-radius:0 0 0 6px;background:rgba(15,23,42,.7);color:#fff;font-size:11px;line-height:16px;cursor:pointer;padding:0}

/* 详情弹窗截图画廊 */
.wimgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.wimgs img{width:100%;height:90px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in;transition:.15s}
.wimgs img:hover{transform:scale(1.03);border-color:var(--green);box-shadow:0 4px 12px rgba(31,138,122,.2)}

@media (max-width:768px){ .cf-grid{grid-template-columns:1fr} }

/* 加密条目卡片 */
.card.encrypted{border-color:#FCA5A5;background:#FEF8F6}
.card.encrypted:hover{border-color:#F87171}
.card.encrypted h4{color:#991B1B}

/* 移动端适配：见文件末尾「iPhone 适配」大块（放在最后以取得层叠优先权） */

/* 库存网格 */
.stock-cat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.stock-cat .cat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.stock-cat .cat h4{margin:0 0 10px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.stock-cat .cat h4 .pill{font-size:10px;padding:2px 6px;border-radius:4px}
.stock-cat .item{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px dashed var(--line2)}
.stock-cat .item:last-child{border-bottom:none}

/* 营销素材墙 */
.media-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.media-card{aspect-ratio:1;background:linear-gradient(135deg,#E6F4F1,#CFE5E1);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;text-align:center;cursor:pointer;transition:all .15s;position:relative;overflow:hidden}
.media-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.media-card .ph{width:32px;height:32px;color:var(--green-deep);margin-bottom:6px}
.media-card .ttl{font-size:11px;font-weight:600;color:var(--green-deep)}
.media-card .meta{font-size:10px;color:var(--text2);margin-top:2px}
.media-card .badge{position:absolute;top:4px;right:4px;font-size:9px;padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.85);color:var(--green-deep)}

/* 视频模板 */
.v-template{display:flex;gap:10px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:8px}
.v-template .frame{width:100px;height:60px;background:#0F172A;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:10px}
.v-template .info{flex:1}
.v-template .info h5{margin:0 0 4px;font-size:13px}
.v-template .info p{margin:0;font-size:11px;color:var(--text2)}
.v-template .info .stat{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--text2);margin-right:10px}

/* 阶段颜色系统说明 */
.legend{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--text2);margin-bottom:8px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:4px}
.legend span::before{content:"";width:8px;height:8px;border-radius:50%}
.legend .s1::before{background:var(--s1)}.legend .s2::before{background:var(--s2)}.legend .s3::before{background:var(--s3)}.legend .s4::before{background:var(--s4)}

/* ===== 售后工单专属 ===== */
.ticket-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:2px}
.ticket-tabs button{padding:4px 11px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:11px;color:var(--text2);transition:all .15s}
.ticket-tabs button:hover{border-color:var(--green-line);color:var(--green-deep)}
.ticket-tabs button.on{background:var(--green);color:#fff;border-color:var(--green)}
.tl-snap{display:flex;flex-wrap:wrap;gap:6px}
.tl-snap img{width:52px;height:52px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in;transition:transform .15s}
.tl-snap img:hover{transform:scale(1.08);border-color:var(--green)}
.sync-badge{font-size:11px;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.15);color:#fff;cursor:default}
.sync-badge.sync{background:var(--s2)}
.sync-badge.ok{background:#10B981}
.sync-badge.offline{background:var(--s4)}
.sync-log{max-height:220px;overflow-y:auto;background:var(--line2);border-radius:8px;padding:8px 10px;font-size:11px;font-family:ui-monospace,Menlo,monospace;line-height:1.7}
.sync-log .lg{display:flex;gap:6px;align-items:baseline}
.sync-log .lg .ts{color:var(--text2);flex-shrink:0}
.sync-log .lg .msg{color:#334155;word-break:break-all}
.batch-bar{display:flex;align-items:center;gap:8px;background:var(--green-soft);border:1px solid var(--green-line);border-radius:8px;padding:8px 12px;margin-bottom:12px;font-size:12px;color:var(--green-deep);flex-wrap:wrap}
.batch-bar b{color:var(--green-deep)}
.tk-overdue{border-color:#FCA5A5!important;background:#FEF8F6}
.tk-overdue:hover{border-color:#F87171!important}
.tk-badge-off{color:var(--text2)}
.tk-badge-on{font-weight:700}
.modal .body .tk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:768px){ .modal .body .tk-grid{grid-template-columns:1fr} }

/* ============================================================
 * v2.0 界面美化 + 登录认证样式
 * ============================================================*/

/* ---- 设计令牌微调 ---- */
:root{
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(15,107,94,.08);
  --shadow-md:0 4px 16px rgba(15,107,94,.08);
  --shadow-lg:0 16px 40px rgba(15,107,94,.16);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---- 全局平滑过渡 ---- */
body{ -webkit-font-smoothing:antialiased; }
.btn, .card, .kpi, .nav-tabs button, .subnav .item, .toolbar .chip,
.ticket-tabs button, .modal .foot button{ transition:all .18s var(--ease); }

/* ---- 顶部导航质感 ---- */
.nav{ background:linear-gradient(135deg,#1F8A7A 0%,#166b5f 60%,#0F6B5E 100%); }
.nav .logo{ font-size:16px; }
.nav-tabs button:hover{ transform:translateY(-1px); }
.nav-tabs button.active{ box-shadow:0 2px 8px rgba(0,0,0,.12); }
.nav-divider{ width:1px; height:20px; background:rgba(255,255,255,.25); margin:0 4px; }
.user-btn{ display:flex; align-items:center; gap:6px; color:#fff; padding:6px 10px; border-radius:6px; font-size:12px; max-width:140px; }
.user-btn:hover{ background:rgba(255,255,255,.12); }
.user-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- 按钮精致化 ---- */
.btn{ box-shadow:0 1px 2px rgba(15,107,94,.15); }
.btn:active{ transform:translateY(1px); box-shadow:none; }
.btn.ghost{ box-shadow:none; }

/* ---- 指标卡 & 卡片悬浮 ---- */
.kpi{ border-radius:12px; box-shadow:var(--shadow-sm); transition:all .18s var(--ease); }
.kpi:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card{ border-radius:12px; box-shadow:var(--shadow-sm); }
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ---- 表格 ---- */
.tbl{ border-radius:12px; box-shadow:var(--shadow-sm); }

/* ---- 模态框入场动画 ---- */
.modal-bg.show .modal{ animation:modalIn .22s var(--ease); }
@keyframes modalIn{ from{ transform:translateY(16px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }

/* ---- 登录遮罩层 ---- */
.login-overlay{
  position:fixed; inset:0; z-index:500; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(31,138,122,.18), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(245,165,36,.14), transparent 55%),
    #F3F8F6;
}
.login-card{
  width:380px; max-width:100%; background:#fff;
  border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-lg); padding:36px 34px;
  animation:modalIn .3s var(--ease);
}
.login-logo{
  width:56px; height:56px; margin:0 auto 14px; border-radius:16px;
  background:linear-gradient(135deg,#1F8A7A,#0F6B5E);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(31,138,122,.3);
}
.login-logo svg{ width:30px; height:30px; }
.login-card h2{ margin:0 0 4px; font-size:20px; text-align:center; color:var(--text); }
.login-sub{ text-align:center; color:var(--text2); font-size:13px; margin:0 0 24px; }
.login-card .field{ display:block; margin-bottom:14px; }
.login-card .field span{ display:block; font-size:12px; color:var(--text2); margin-bottom:6px; }
.login-card .field input{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:14px; background:#FAFCFB; transition:all .18s var(--ease); box-sizing:border-box;
}
.login-card .field input:focus{ outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(31,138,122,.12); }
.login-error{ color:var(--red); font-size:12px; min-height:16px; margin:0 0 8px; text-align:center; }
.login-btn{
  width:100%; padding:12px; border:none; border-radius:10px; cursor:pointer;
  background:linear-gradient(135deg,#1F8A7A,#0F6B5E); color:#fff; font-size:15px; font-weight:600;
  box-shadow:0 6px 16px rgba(31,138,122,.28); transition:all .18s var(--ease);
}
.login-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(31,138,122,.34); }
.login-btn:active{ transform:translateY(0); }
.login-btn:disabled{ opacity:.6; cursor:default; }
.login-foot{ text-align:center; color:var(--text2); font-size:11px; margin:16px 0 0; }

@media (max-width:768px){
  .login-card{ padding:30px 22px; }
}

/* ---- 「今天要处理」折叠 ---- */
/* ===================================================================
   v20：一级模块「今天要处理」整页
   -------------------------------------------------------------------
   复用 .today / .today-list / .today-item / .today-item .num 那套骨架 ——
   和原来那张提示卡是同一套视觉语言，用户不会觉得换了个系统；
   这里只补「整页」需要的东西：单列、可展开明细、空态灰数字。
   （原来的 .today-head / .today-chevron 折叠头已随卡片一起删掉）
   =================================================================== */
.td-page{ margin-bottom:4px; }
.td-top{ display:flex; align-items:baseline; gap:9px; margin:0 0 12px; }
.td-top h2{ margin:0; font-size:17px; }
.td-day{ font-size:12px; color:var(--text2); }
.td-count{ margin-left:auto; font-size:12px; color:var(--green-deep); }
/* 整页走单列 —— .today-list 默认是 auto-fit 网格，桌面上会摊成多列，
   明细展开后每列被压窄，中文会换行错位 */
.td-page .today-list{ grid-template-columns:1fr; }
/* .today-item 默认 flex 横排；要能「上面一行 + 下面明细」→ 改块级 */
.td-page .today-item{ display:block; }
.td-head{ display:flex; align-items:center; gap:10px; }
/* 零项：数字压成灰的，一眼扫过去就知道没事 */
.today-item .num.off{ color:#CBD5E1; }
.td-detail{ margin-top:9px; padding-top:8px; border-top:1px solid var(--line); }
.td-row{ display:flex; align-items:baseline; gap:8px; padding:3px 0; font-size:12.5px; color:#475569; }
.td-row .td-a{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.td-row .td-b{ flex:0 0 auto; color:var(--text2); }
.td-row .td-c{ margin-left:auto; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.td-more{ font-size:11.5px; color:var(--text2); padding:5px 0 0; }
@media (max-width:900px){
  .td-top h2{ font-size:16px; }
  .td-row{ font-size:12px; }
}

/* ---- 客户库 · 平台可达条 ---- */
.reach-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 0 12px; }
.reach-label{ font-size:11px; color:var(--text2); font-weight:600; margin-right:2px; }

/* ---- 客户库 · 联系方式 ---- */
.ci-cell{ max-width:220px; }
.ci-cell .ci-line{ display:inline-flex; align-items:center; gap:4px; margin:2px 4px 2px 0; font-size:11px; color:#334155; }
.ci-cell .ci-ico{ opacity:.9; }

/* ---- 编辑联系方式弹窗 ---- */
.ci-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ci-label{ flex:0 0 118px; font-size:12px; color:var(--text2); }
.ci-input{ flex:1; padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:#FAFCFB; transition:all .15s var(--ease); }
.ci-input:focus{ outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(31,138,122,.12); }

/* ---- 客户库 · 性别标签 ---- */
.tag.male{ background:#E0F2FE; color:#075985; }
.tag.female{ background:#FCE7F3; color:#9D174D; }

/* ---- 单选组（性别 / 付款状态，小程序式） ---- */
.gender-group{ display:flex; gap:6px; flex-wrap:wrap; }
.g-opt{ display:inline-flex; align-items:center; gap:4px; padding:6px 14px; border-radius:99px; border:1px solid var(--line); background:#fff; font-size:13px; color:var(--text2); cursor:pointer; transition:all .15s var(--ease); user-select:none; }
.g-opt input{ display:none; }
.g-opt:hover{ border-color:var(--green); color:var(--text); }
.g-opt.on{ background:var(--green); border-color:var(--green); color:#fff; font-weight:600; }

/* ---- 批量导入 / 小程序导入 textarea ---- */
#bi-text,.bi-text{ width:100%; min-height:160px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:13px; line-height:1.8; background:#FAFCFB; font-family:inherit; box-sizing:border-box; resize:vertical; }
#bi-text:focus,.bi-text:focus{ outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(31,138,122,.12); }

/* ---- 小程序导入 · 导出命令块 ---- */
.mp-cmd{ font-family:Consolas,Menlo,monospace; font-size:11px; line-height:1.6; background:#F3F4F6; border:1px solid var(--line); border-radius:6px; padding:8px 10px; word-break:break-all; color:#334155; cursor:pointer; transition:background .15s; }
.mp-cmd:hover{ background:#EBEDEE; }
.mp-cmd:active{ background:#E2E5E7; }

/* ---- 催款中心 · 聚合筛选条（小程序式） ---- */
.agg-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:-4px 0 12px; }
.agg-label{ font-size:11px; color:var(--text2); font-weight:600; margin-right:2px; }
.pay-chip{ display:inline-flex; align-items:center; padding:4px 12px; border-radius:99px; border:1px solid var(--line); background:#fff; font-size:11px; color:var(--text2); cursor:pointer; transition:all .15s var(--ease); }
.pay-chip:hover{ border-color:var(--green); color:var(--text); }
.pay-chip.on{ background:var(--green); border-color:var(--green); color:#fff; font-weight:600; }
.pay-chip.clear{ color:var(--red); border-color:var(--red); }
.pay-chip.clear:hover{ background:#FEE2E2; }


/* ---- 聚合排行页（对齐小程序 aggregate） ---- */
.agg-sortbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.agg-sort{ padding:5px 14px; border-radius:99px; border:1px solid var(--line); background:#fff; font-size:12px; color:var(--text2); cursor:pointer; transition:all .15s var(--ease); }
.agg-sort:hover{ border-color:var(--green); color:var(--text); }
.agg-sort.on{ background:var(--green); border-color:var(--green); color:#fff; font-weight:600; }
.agg-chart-row{ display:flex; align-items:center; gap:8px; margin:0 0 7px; }
.agg-chart-name{ width:86px; flex-shrink:0; font-size:11px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.agg-chart-bar{ height:14px; border-radius:3px 4px 4px 3px; min-width:4px; flex:1; background:#F1F5F4; overflow:hidden; }
.agg-chart-bar > span{ display:block; height:100%; border-radius:3px 4px 4px 3px; min-width:4px; }
.agg-chart-val{ font-size:11px; font-weight:600; color:var(--text); white-space:nowrap; }
.agg-list{ display:flex; flex-direction:column; gap:6px; }
.agg-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; transition:all .15s var(--ease); }
.agg-row:hover{ border-color:var(--green); box-shadow:0 2px 8px rgba(31,138,122,.10); transform:translateY(-1px); }
.agg-rank{ width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:var(--line2); color:var(--text2); flex-shrink:0; }

/* ---- 三语模板语言切换 tab（复用 agg-sort 样式） ---- */
#mp-cloud-opt{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px dashed var(--line); border-radius:8px; background:#FAFCFB; margin:4px 0; }

/* ---- 订单管理 · 真实图片与多图角标（对齐小程序 .order-img） ---- */
.img-wrap > img{ transition:transform .3s var(--ease); }
.img-wrap > img:hover{ transform:scale(1.04); }
.img-wrap > .img-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.img-more{ position:absolute; bottom:6px; right:6px; background:rgba(15,23,42,.7); color:#fff; font-size:10px; padding:2px 6px; border-radius:99px; font-weight:600; }
.img-zoom-hint{ position:absolute; bottom:6px; left:6px; background:#0d9488; color:#fff; font-size:10px; padding:2px 8px; border-radius:99px; opacity:0; transition:opacity .2s; pointer-events:none; }
.order-card:hover .img-zoom-hint{ opacity:1; }

/* ---- 订单卡片：右上角删除按钮（hover 显示，阻止冒泡到 openOrderDetail） ---- */
.order-del{ position:absolute; bottom:6px; right:6px; background:rgba(239,68,68,.85); color:#fff; border:none; width:24px; height:24px; border-radius:50%; font-size:13px; line-height:1; cursor:pointer; opacity:0; transition:all .15s var(--ease); display:flex; align-items:center; justify-content:center; padding:0; }
.order-card:hover .order-del{ opacity:1; }
.order-del:hover{ background:#DC2626; transform:scale(1.1); }
/* 删除时红框抖动提示（可与 confirm 协同） */
.order-card.deleting{ animation:shake .35s var(--ease); }
@keyframes shake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-4px) } 75%{ transform:translateX(4px) } }

/* 红色危险按钮（删除订单） ---- */
.btn.danger{ background:#FEE2E2; color:#DC2626; border-color:#FCA5A5; }
.btn.danger:hover{ background:#DC2626; color:#fff; border-color:#DC2626; }
.btn.danger:disabled{ background:#F3F4F6; color:#9CA3AF; border-color:#E5E7EB; }

/* ===== v17：清空订单池预检框的自带按钮行 =====
   ⚠️ 类名故意**不叫 .foot** —— 弹窗模板里全局的取消/确定也是 .foot，
      而且它就在 #modalBody 里（我的内容在同层更靠前），
      `querySelector('#modalBg .foot')` 会先命中我这一行，
      于是 showModal(true) 把**我的**按钮行 display:none 掉、全局那颗反而留着，
      最后「我确认」按钮量出来是 0×0、点不到（这个坑真踩过）。 */
.oc-foot{
  display:flex; justify-content:flex-end; gap:8px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
}
.oc-foot .btn{ min-height:30px; }

/* ===== v18：弹窗自带的按钮行（新增/编辑客户、汇率、催款、批量导入、小程序导入、数据同步） =====
   ⚠️ 类名故意**不叫 .foot** —— 与上面 .oc-foot 完全同源的一个坑，
      v18 之前客户弹窗这里就叫 .foot，导致：
        ① `.nc-form .foot{display:flex;gap:8px}` 没有 justify-content
           → 按钮挤在左侧，**贴不到右下角**（李想截图反馈的正是这个）
        ② `querySelector('#modalBg .foot')` 先命中本行 → showModal(hideFoot)
           把**本行** display:none、全局那颗反而留下，页面上多出一颗莫名的按钮
        ③ `.btn{padding:6px 12px}` 把按钮压得又扁又小，不像主操作
      现在 showModal() 已收紧为 `#modalBg > .modal > .foot`，双保险。 */
.ac-foot{
  display:flex;
  justify-content:flex-end;          /* 取消 / 保存客户 贴右下角 */
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  /* ⚠️ 必须 sticky —— 表单（新增客户有 7 个字段 + 7 个平台 + 7 个联系方式）
     高度远超弹窗可视区，不钉住的话「保存客户」会被顶到滚动区外，
     用户只看得见全局那颗「取消/确定」，点下去是空回调 = 保存不了。
     这正是李想截图里「按钮有点问题」的真相。 */
  position:sticky;
  bottom:0;
  z-index:2;
  background:#fff;
}
.ac-foot .btn{ flex:0 0 auto; }       /* 按内容宽度，不拉伸 */
.ac-foot .ac-del{ margin-right:auto; } /* 编辑弹窗的「删除客户」留在最左 */

/* 手机端：主操作做大，手指点得准 */
@media (max-width:768px){
  .ac-foot{ gap:10px; margin-top:16px; padding-top:16px; }
  .ac-foot .btn{ min-height:46px; padding:11px 20px; font-size:14.5px; }
  .ac-foot .ac-save{ padding:11px 26px; }   /* 保存按钮再宽一点，主次分明 */
}

/* 弹窗底部封边：长表单滚到底时不再漏出下层表格 / 备案条 */
@media (max-width:768px){
  .modal{ max-height:86vh; }
  .modal .body{ padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
}

/* ===== v11：客户名库（客户名录 / 按地区 / 全局选择器） ===== */
.cl-bar{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.cl-search{
  padding:6px 10px; border:1px solid var(--line); border-radius:6px;
  width:220px; font-size:13px; background:#fff;
}
.cl-search:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 2px rgba(31,138,122,.12); }

/* ===================================================================
   v22：客户名库「重复 / 相似名字」检查
   -------------------------------------------------------------------
   一个警示条 + 列表行小三角 + 一个分组面板。
   ⚠️ 全是**只读提示**的样式，不涉及任何数据操作。
   =================================================================== */
.cl-simbar{
  display:flex; align-items:center; gap:9px;
  background:#FFF7ED; border:1px solid #FAC775; border-radius:10px;
  padding:9px 12px; margin-bottom:12px; cursor:pointer;
  transition:all .15s var(--ease);
}
.cl-simbar:hover{ background:#FEF3E2; }
.cl-simbar-ico{ display:inline-flex; flex:none; }
.cl-simbar-tx{ font-size:12.5px; color:var(--text); }
.cl-simbar-tx b{ color:#B45309; font-weight:600; }
.cl-simbar-go{ margin-left:auto; flex:none; font-size:11.5px; color:#B45309; }
.cl-sim-ico{ display:inline-flex; vertical-align:-2px; margin-right:4px; }
tr.sim{ background:#FFFBF3; }

/* ---- 检查面板 ---- */
.sim-card{ border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; margin-bottom:12px; }
.sim-card.sim-dup{ border-color:#F09595; }
.sim-card.sim-high{ border-color:#FAC775; }
.sim-hd{ display:flex; align-items:center; gap:8px; padding:9px 12px; background:#F7FAF8; }
.sim-card.sim-dup .sim-hd{ background:#FCEBEB; }
.sim-card.sim-high .sim-hd{ background:#FFF7ED; }
.sim-no{ font-size:12.5px; font-weight:600; color:var(--text); }
.sim-lv{ border-radius:99px; padding:1px 9px; font-size:11px; color:#fff; flex:none; }
.sim-lv-dup{ background:var(--red); }
.sim-lv-high{ background:var(--orange); }
.sim-lv-mid{ background:#94A3B8; }
.sim-cnt{ font-size:11px; color:var(--text2); }
.sim-risk{ margin-left:auto; font-size:11px; color:#A32D2D; }
/* 「原因」这一行是李想点名要的 —— 给他一个能一眼看到的底色 */
.sim-why{ padding:8px 12px; background:#FFFBF3; border-bottom:1px solid #FDE3C0; font-size:11.5px; color:var(--text); line-height:1.55; }
.sim-why-k{ color:#854F0B; }
.sim-members{ padding:2px 12px; }
.sim-m{ padding:9px 0; border-bottom:1px solid var(--line2); }
.sim-m:last-child{ border-bottom:none; }
.sim-m1{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.sim-nm{ font-size:12.5px; font-weight:600; color:var(--text); }
.sim-meta{ font-size:11.5px; color:var(--text2); }
.sim-m2{ font-size:11.5px; color:#94A3B8; margin-top:2px; }
.sim-ship{ padding:8px 12px; background:#F7FAF8; border-top:1px solid var(--line2); }
.sim-ship[hidden]{ display:none; }
.sim-ship-blk{ margin-bottom:8px; }
.sim-ship-blk:last-child{ margin-bottom:0; }
.sim-ship-nm{ font-size:11.5px; font-weight:600; color:var(--text2); margin-bottom:3px; }
.sim-ship-row{ display:flex; gap:8px; font-size:11.5px; color:#475569; padding:2px 0; }
.sim-ship-d{ flex:0 0 44px; color:#94A3B8; font-variant-numeric:tabular-nums; }
.sim-ship-g{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sim-ship-t{ flex:0 0 auto; color:var(--text2); }
.sim-ship-none{ color:#94A3B8; }
.sim-act{ display:flex; gap:8px; flex-wrap:wrap; padding:9px 12px 11px; border-top:1px solid var(--line2); }
.sim-donebar{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text2); padding:2px 2px 6px; }
.sim-donebar button{ margin-left:auto; }
@media (max-width:900px){
  /* 手机端窄，成员行从「横排」改「竖排」，免得名字和地区互相挤 */
  .sim-m1{ flex-direction:column; gap:2px; }
  .sim-ship-row{ flex-wrap:wrap; }
  .sim-ship-g{ flex:1 1 100%; }
  /* 触摸目标：三个动作按钮至少 36px 高 */
  .sim-act .btn{ min-height:36px; padding:8px 12px; }
}

/* ===================================================================
   v22：搜索框 —— 中文输入修复的配套样式
   =================================================================== */
/* 「清空 ×」用**原生** type="search" 自带的那颗，不自绘。
   原因：8 处搜索框的父容器 flex 写法各不相同（有的 flex:1、有的定宽 220px、
   toolbar 还会 wrap），套一层 wrapper 很容易把某一处宽度改歪，而原生方案零风险。
   ⚠️ 必须把 WebKit 默认外观关掉：不然某些版本会给它加圆角/内阴影，
      和项目里的 .input / .cl-search 风格打架。 */
input[type="search"]{ -webkit-appearance:none; appearance:none; }
input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; margin-right:2px; cursor:pointer; opacity:.85;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>") center/contain no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover{ opacity:1; }

/* 搜索命中高亮 */
mark{ background:#DFF3EE; color:var(--green-deep); border-radius:2px; padding:0 1px; }

@media (max-width:900px){
  /* ⚠️ iOS 上 font-size < 16px 的输入框，一聚焦就会**把整页放大**。
     弹窗里的输入框早就在上面 `.modal .body input` 那条规则修过了，
     **页面级搜索框一直漏着**（.cl-search 是 13px）。
     这里把页面级搜索框统一抬到 16px。 */
  .toolbar input, .ar-toolbar input, .cl-search, .cl-bar input,
  input[type="search"]{ font-size:16px; }
  /* 搜索框变高一点，按触摸目标顺手给个下限 */
  input[type="search"]{ min-height:38px; }
}

/* ===================================================================
   v23：选客户防错 —— 联想候选警示 + 选中后核对条
   -------------------------------------------------------------------
   这一层的目的就一个：**在发货录进去之前，把"名字像的人"摆到你眼前**。
   =================================================================== */
.cs-warn{ display:inline-flex; vertical-align:-1px; margin-right:4px; flex:none; }
/* 有相似名的候选行给个淡黄底，扫一眼就能看出"这几个要小心" */
.cs-item.risky{ background:#FFFBF3; }
.cs-item.risky.on{ background:var(--green-soft); }
.cp-item.risky{ background:#FFFBF3; }

/* 核对条：插在输入框**紧后面**、走正常文档流（不浮动）。
   弹窗里能滚动，浮动层会飘；而这里要在里面点按钮，飘走就没法用了。 */
.cs-check{
  margin:7px 0 3px; padding:10px 12px;
  background:#FFF7ED; border:1px solid #FAC775; border-radius:10px;
  font-size:11.5px; color:var(--text); line-height:1.5;
}
.csc-hd{ display:flex; align-items:center; gap:6px; font-weight:600; color:#412402; margin-bottom:7px; }
.csc-row{ display:flex; align-items:baseline; gap:8px; padding:3px 0; border-bottom:1px dashed #FDE3C0; }
.csc-row:last-of-type{ border-bottom:none; }
.csc-nm{ font-weight:600; color:var(--text); flex:0 0 auto; }
.csc-meta{ color:var(--text2); flex:1 1 auto; min-width:0; }
.csc-stat{ flex:0 0 auto; color:#94A3B8; }
.csc-self{ margin-top:8px; padding:7px 9px; background:#fff; border:1px solid #CFE5E1; border-radius:7px; }
.csc-self-k{ color:var(--green-deep); }
.csc-self b{ color:var(--text); font-weight:600; margin:0 6px; }
.csc-act{ display:flex; gap:7px; margin-top:9px; }
.csc-act .btn{ font-size:11.5px; padding:5px 12px; }
.csc-ok{ background:var(--green-deep); color:#fff; border-color:var(--green-deep); }
@media (max-width:900px){
  /* 手机上「名字 + 地区」横着挤不下，拆两行 */
  .csc-row{ flex-wrap:wrap; }
  .csc-meta{ flex:1 1 100%; }
  .csc-act .btn{ min-height:36px; }
}
.cl-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.cl-chip{
  padding:4px 11px; border-radius:99px; font-size:12px; cursor:pointer;
  background:#F1F5F4; color:#4B5D58; border:1px solid transparent; transition:all .12s;
  user-select:none;
}
.cl-chip:hover{ background:var(--green-soft); color:var(--green-deep); }
.cl-chip.on{ background:var(--green-deep); color:#fff; border-color:var(--green-deep); }

/* v15：客户名录勾选列 + 批量删除 */
.cl-ck{ width:34px; text-align:center; padding-left:8px; padding-right:0; }
.cl-ck input[type=checkbox]{ width:14px; height:14px; margin:0; cursor:pointer; accent-color:var(--green-deep); vertical-align:middle; }
.tbl tbody tr.on{ background:#F0FAF7; }
.tbl tbody tr.on:hover{ background:#E6F4F1; }
/* 操作列三个按钮排一行不换行（编辑 / 复制 / 删除） */
.cl-ops{ white-space:nowrap; }
.cl-del1{ color:#DC2626 !important; border-color:#FCA5A5 !important; }
.cl-del1:hover{ background:#FEE2E2 !important; color:#DC2626 !important; }

/* 按地区分组的卡片墙 */
.cl-region-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.cl-region-card{ border:1px solid var(--line); border-radius:10px; padding:12px; background:#FAFCFB; }
.cl-region-top{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:5px; }
.cl-region-top b{ font-size:13.5px; }
.cl-region-sub{ font-size:11.5px; color:var(--text2); margin-bottom:8px; }
.cl-region-names{ display:flex; gap:5px; flex-wrap:wrap; }
.cl-nm{
  font-size:11.5px; padding:2px 8px; border-radius:99px;
  background:#fff; border:1px solid var(--line); cursor:pointer; transition:.12s;
}
.cl-nm:hover{ background:var(--green-soft); border-color:var(--green); color:var(--green-deep); }
.cl-nm.more{ color:var(--text2); cursor:default; }

/* 全局客户选择器（独立浮层，不占用主 modal） */
.cp-overlay{
  display:none; position:fixed; inset:0; z-index:120;
  background:rgba(15,23,42,.42);
  align-items:center; justify-content:center; padding:16px;
}
.cp-overlay.show{ display:flex; }
.cp-panel{
  background:#fff; border-radius:14px; width:100%; max-width:520px;
  max-height:84vh; display:flex; flex-direction:column;
  box-shadow:0 18px 40px rgba(15,23,42,.22);
}
.cp-panel h3{ margin:0; padding:15px 18px; font-size:15px; border-bottom:1px solid var(--line); }
.cp-body{ padding:14px 18px; overflow-y:auto; }
.cp-foot{ display:flex; justify-content:flex-end; gap:8px; padding-top:12px; }
.cp-list{ max-height:44vh; overflow-y:auto; border:1px solid var(--line); border-radius:8px; }
.cp-item{
  display:flex; align-items:center; gap:9px; padding:9px 12px;
  border-bottom:1px solid var(--line2); cursor:pointer; transition:.12s;
}
.cp-item:last-child{ border-bottom:0; }
.cp-item:hover{ background:#F4FAF8; }
.cp-item.on{ background:var(--green-soft); }
.cp-tick{
  width:16px; height:16px; flex:none; border-radius:4px;
  border:1px solid var(--line); background:#fff;
  font-size:11px; line-height:14px; text-align:center; color:var(--green-deep);
}
.cp-item.on .cp-tick{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; }
.cp-name{ font-size:13px; font-weight:600; min-width:72px; }
.cp-meta{ font-size:11.5px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-pick-btn{ font-size:12px; white-space:nowrap; flex:none; }
/* 客户名输入框 + 「选客户」按钮成对出现 */
.cp-field{ display:flex; align-items:center; gap:6px; }
.cp-field > input{ flex:1; min-width:0; }

/* v12：客户名库页面内的视图切换条（名录 / 按地区） */
.cl-tabs{ display:flex; gap:6px; margin-bottom:10px; }
.cl-tab{
  padding:6px 14px; font-size:12.5px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--text2); transition:.15s var(--ease);
}
.cl-tab:hover{ border-color:var(--green); color:var(--green-deep); background:#F4FAF8; }
.cl-tab.on{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; font-weight:600; }

@media (max-width:900px){
  .cl-search{ width:100%; }
  .cl-bar h4{ flex:1 1 100%; }
  .cl-region-grid{ grid-template-columns:1fr; }
  .cl-tabs{ flex-wrap:wrap; }
  .cp-item{ flex-wrap:wrap; row-gap:2px; }
  .cp-meta{ white-space:normal; }
}

/* ---- F6：面板折叠/展开（催款系统所有功能面板通用） ---- */
.fold-sec{ margin-bottom:12px; }
.fold-sec.closed{ margin-bottom:8px; }
.fold-head{ display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:#FAFCFB; cursor:pointer; user-select:none; transition:all .15s var(--ease); }
.fold-head:hover{ border-color:var(--green); background:#F0FAF8; }
.fold-arrow{ font-size:11px; color:var(--text2); width:14px; text-align:center; flex-shrink:0; transition:transform .15s var(--ease); }
.fold-title{ font-size:12px; font-weight:700; color:var(--text); letter-spacing:.2px; }
.fold-title .tag{ margin-right:4px; }
.fold-hint{ font-size:11px; color:var(--text2); margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 日期分组头部的折叠箭头（订单管理） */
.date-h .fold-arrow{ font-size:12px; color:var(--green-deep); }
/* 弹窗内状态/发货方式快捷按钮排 */
#modalBody .btn{ font-size:12px; }

/* ===== 子应用宿主（镶嵌报价 / 标价工具，均走 Shadow DOM）===== */
#inlayHost, #tagHost{
  /* v3：layout 改成三列「模块导航 134 / 子菜单 188 / 内容 1fr」，
     子应用要占最右的内容列，所以是第 3 列（旧版两列布局时这里是 2） */
  grid-column:3; grid-row:1;
  min-width:0;
  height:calc(100vh - 54px);
  height:calc(100dvh - 54px);
  overflow:hidden;
}
/* v11：二级栏收起后 layout 只剩两列，子应用要跟着挪到第 2 列。
   ⚠️ 这条跟 v10「子应用被塞进 188px 窄列」是同一个坑，列数一变就得跟着改 */
.layout.sub-collapsed #inlayHost,
.layout.sub-collapsed #tagHost{ grid-column:2; }
#inlayHost[hidden], #tagHost[hidden]{ display:none !important; }

/* ⚠️⚠️ v20b：手机端必须把上面那条撤销掉。
   下面 900px 块里写的是 `#inlayHost{grid-column:1}`，特异性只有 (1,0,0)，
   **干不过**上面这条 `.layout.sub-collapsed #inlayHost` 的 (1,2,0) —— 于是
   `grid-column:2` 被留着，CSS Grid 会自动生成一个**隐式的第 2 列**，
   而第 1 列（1fr）里什么都没有、仍然占着位置 →
   手机端实测变成 `115.391px 286.609px`，镶嵌报价的内容区只剩 287px。
   （和「子菜单条复活」是同一个病根：旧规则没删干净，只在 sub-collapsed 时引爆。）

   这里靠「特异性相同 + 位置更靠后」取胜，不用 !important。 */
@media (max-width:900px){
  .layout.sub-collapsed #inlayHost,
  .layout.sub-collapsed #tagHost,
  .layout.sub-collapsed.root-collapsed #inlayHost,
  .layout.sub-collapsed.root-collapsed #tagHost{
    grid-column:1;
  }
}

@media (max-width:900px){
  #inlayHost{
    /* v19：手机端模块条与子菜单条都没了（改走抽屉），单列布局下
       子应用直接跟在顶栏下面，不需要 grid-row 定位。
       ⚠️ 高度**不能再扣 --subnavh** —— 那层横条已经不存在，
          扣了就白白空出 54px 的空白。 */
    grid-column:1; grid-row:auto;
    height:calc(100vh  - var(--navh,52px));
    height:calc(100dvh - var(--navh,52px));
    padding-top:0;
  }
  /* 标价工具在手机上内容会超出一屏（画布 + 一整列面板），必须让它自己滚。
     注意：子应用里的 :host{overflow:auto} 会被宿主规则压过，所以只能在这里放开。 */
  #tagHost{
    grid-column:1; grid-row:auto;
    height:calc(100vh  - var(--navh,52px));
    height:calc(100dvh - var(--navh,52px));
    padding-top:0;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ===================================================================
   iPhone 适配（目标机型 iPhone 17：CSS 视口 402×874、DPR 3、
   安全区 top 62 / bottom 34。此块置于文件末尾，用于覆盖前面所有规则）
   =================================================================== */

/* 安全区尺寸统一收口：默认读 env()，非刘海机自动为 0；
   经由变量中转，便于排障时在控制台覆盖（iPhone 17 竖屏：62 / 34） */
:root{
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
@media (max-width:900px){

  /* ---------- 1. 顶栏：单行，汉堡 + 标题 + 右侧图标 ---------- */
  .nav{
    height:auto; min-height:52px;
    flex-wrap:nowrap;                  /* v19：模块条已进抽屉，不再需要第二行 */
    align-items:center;
    gap:4px;
    /* 让开刘海/灵动岛：安全区 + 6px 视觉留白 */
    padding:calc(6px + var(--sat)) 8px 6px;
  }
  .nav-burger{ margin-right:0; }
  .nav .logo{
    font-size:15px; letter-spacing:0;
    white-space:nowrap;                /* 徽标不再被压成竖排 */
    flex:0 0 auto;
    min-width:0;
  }
  .nav .logo svg{ width:19px; height:19px; flex:0 0 auto; }

  /* 第一行右侧：只保留图标，杜绝「已/保/存」竖排单字 */
  .nav-right{ order:2; margin-left:auto; flex:0 1 auto; flex-wrap:nowrap; gap:2px; }
  .nav-right button{
    font-size:0; gap:0; padding:0;
    width:38px; height:38px;
    justify-content:center; white-space:nowrap;
  }
  .nav-right button svg{ width:18px; height:18px; }
  .nav-right .syn{
    font-size:0; width:9px; height:9px; padding:0;
    border-radius:50%; flex:0 0 auto;   /* 「已保存」胶囊压成一个状态点 */
  }
  .nav-divider{ display:none; }
  .user-btn{ max-width:none; width:38px; height:38px; justify-content:center; padding:0; }
  .user-btn span{ display:none; }

  /* ---------- 2. 布局：单列，内容紧贴顶栏（横条已取消） ----------
     v19：原来这里是「子菜单条固定在顶栏下方 → 主内容 padding-top 让位」。
     两层横条都进抽屉了，让位也就没必要了；留着只会空出 54px 白条。 */
  .layout{
    grid-template-columns:1fr;
    min-height:calc(100vh - var(--navh,52px));
    min-height:calc(100dvh - var(--navh,52px));
    padding-top:0;
  }
  .main{ padding:14px 12px calc(24px + var(--sab)); }

  /* ---------- 3. 字号与行高：清掉 10px 小字，普遍上调一档 ---------- */
  body{ font-size:15px; line-height:1.55; }
  .muted{ font-size:12.5px; }
  .kpi{ padding:13px 15px; }
  .kpi .label{ font-size:12px; }
  .kpi .num{ font-size:23px; }
  .kpi .delta{ font-size:11.5px; line-height:1.45; margin-top:3px; }
  .section h2{ font-size:19px; }
  .section .sub{ font-size:12.5px; }
  .section .status{ font-size:11.5px; padding:4px 9px; }
  .card h4{ font-size:14.5px; }
  .card h4 .tag, .tag{ font-size:11.5px; padding:3px 7px; line-height:1.5; }
  .card .row{ font-size:12.5px; padding:4px 0; }
  .btn{ font-size:13px; padding:8px 13px; min-height:38px; }
  .today-item{ font-size:13.5px; padding:11px 13px; gap:8px; }
  .today-item .num{ font-size:19px; min-width:30px; }
  .today-item .btn{ font-size:12px; padding:7px 11px; min-height:34px; }
  .tbl{ font-size:13px; }
  .tbl th{ font-size:11.5px; padding:9px 10px; }
  .tbl td{ padding:9px 10px; }
  /* 宽表格横向滚动容器（app.js 的 wrapWideTables 负责包一层） */
  .tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; max-width:100%; }
  .tbl-scroll .tbl{ min-width:max-content; }
  .platform-chip, .ship-chip{ font-size:11.5px; padding:3px 9px; }
  .ship-row{ font-size:12px; gap:6px; }
  .fold-hint{ font-size:12px; }
  .fold-title{ font-size:12.5px; }
  #modalBody .btn{ font-size:13px; }
  /* app.js 里有 48 处内联的 10/11px 字号，内联优先级高于样式表，
     只能用属性选择器兜底（不会误伤 font-size:100px 这类） */
  [style*="font-size:10px"], [style*="font-size:11px"]{ font-size:12.5px !important; line-height:1.5; }

  /* ---------- 3b. 触摸目标：芯片类小按钮一律抬到 ≥34px（Apple HIG 建议 44pt） ---------- */
  .agg-sort{ padding:8px 16px; font-size:13px; min-height:36px; }
  .ticket-tabs button{ padding:8px 13px; font-size:13px; min-height:34px; }
  .pay-chip{ padding:8px 14px; font-size:12.5px; min-height:34px; }
  .toolbar .chip{ padding:8px 12px; font-size:12.5px; min-height:34px; }
  .ship-mode-pick button{ padding:7px 11px; font-size:12.5px; min-height:32px; }
  .g-opt{ padding:9px 15px; font-size:13.5px; min-height:38px; }
  .g-opt input{ width:15px; height:15px; }
  .side-panel .head .close{ padding:8px 12px; min-width:40px; min-height:40px; }
  .agg-chart-row{ min-height:38px; }
  /* 图表左侧客户名是可点区域，抬到 34px 以上才好按 */
  .agg-chart-name{
    width:96px; font-size:12px;
    display:flex; align-items:center; justify-content:flex-end;
    min-height:34px; text-align:right;
  }
  .agg-chart-val{ font-size:12px; }
  .legend{ font-size:12px; gap:7px; }

  /* ---------- 3c. 模块标题行：标题/副标题/按钮不再互相挤压 ---------- */
  .section{ flex-wrap:wrap; align-items:center; gap:6px 10px; margin:6px 0 12px; }
  .section h2{ font-size:18.5px; white-space:nowrap; }
  .section .sub{ flex:1 1 100%; order:4; font-size:12.5px; line-height:1.5; }
  .section .right{ margin-left:auto; }
  .section .right .btn{ white-space:nowrap; flex:0 0 auto; }
  .media-card .ttl{ font-size:12.5px; }
  .media-card .meta{ font-size:11.5px; }

  /* ---------- 4. 表单：拆开手机上会挤爆的多列网格 ---------- */
  .nc-form{ font-size:14px; gap:12px; }
  .nc-form label{ font-size:13px; margin-bottom:5px; }
  .nc-form .row2{ grid-template-columns:1fr 1fr; gap:8px 10px; }
  .nc-form .row2 > :first-child{ grid-column:1 / -1; }  /* 首项独占整行 */
  .nc-form .fx-row{ grid-template-columns:88px 1fr; gap:8px; padding:8px 10px; }
  .nc-form .img-thumb .x{ width:24px; height:24px; font-size:15px; }
  .tl-edit{ grid-template-columns:1fr 1fr; gap:8px; }
  .tl-node{ grid-template-columns:72px 1fr; gap:8px; }
  .order-grid{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .kpis{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .today-list{ grid-template-columns:1fr; }
  .media-wall{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .wimgs{ grid-template-columns:repeat(2,1fr); }

  /* ---------- 5. iOS 关键项：输入框≥16px 才不会被自动放大 ---------- */
  input, select, textarea,
  .nc-form input, .nc-form select,
  .modal .body input, .modal .body select, .modal .body textarea,
  .fx-row input, .tl-edit input, .order-search input{ font-size:16px; }

  /* ---------- 6. 弹窗 / 侧滑面板 / 提示条 ---------- */
  .modal-bg{ padding:10px; align-items:center; }
  .modal{ max-width:100%; width:100%; max-height:78vh; border-radius:14px; }
  .modal h3{ font-size:16px; padding:15px 16px; }
  .modal .body{ padding:14px 16px; }
  .modal .body label{ font-size:13px; margin:12px 0; }
  .modal .foot{
    position:sticky; bottom:0; z-index:2;   /* 长表单里「取消/确定」始终可见 */
    padding:12px 16px calc(12px + var(--sab));
  }
  .modal .foot button{ font-size:14px; padding:10px 16px; min-height:44px; }
  .side-panel{ top:var(--navh,52px); }
  .side-panel .body{ padding:14px; }
  .toast-wrap{
    left:12px; right:12px;
    bottom:calc(16px + var(--sab));
  }
  .toast-wrap > *{ max-width:100%; }

  /* ---------- 7. 底部备案栏：让开 Home 指示条 ---------- */
  #siteFooter{ padding-bottom:calc(5px + var(--sab)) !important; }

  /* ---------- 8. 长文本不再被截断成「…」 ---------- */
  .fold-hint, .card h4{ overflow:visible; text-overflow:clip; }
}

/* 更窄的机器（≤520px，竖屏手机统一收成单列，避免再挤） */
@media (max-width:520px){
  .order-grid{ grid-template-columns:1fr; }
  .media-wall{ grid-template-columns:repeat(2,1fr); }
  .today-item{ flex-wrap:wrap; row-gap:6px; }
  .kpis{ gap:8px; }
  .kpi{ padding:12px; }
  /* v20：抽屉已经是单列，不需要再为「右侧子菜单」留宽度 —— 反过来放宽一点，
     让模块名有充足横向空间（窄屏下原来只有 122px 的模块列） */
  .drawer{ width:min(88vw, 340px); }
}

/* ===================================================================
   到货录入（到货统计 → 批次流转）
   =================================================================== */
.ar-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; }

/* 表格里的照片缩略图 */
.ar-thumbs-inline{ display:flex; align-items:center; gap:4px; }
.ar-thumbs-inline img{
  width:34px; height:34px; object-fit:cover; border-radius:5px;
  border:1px solid var(--line); cursor:zoom-in; transition:.15s var(--ease);
}
.ar-thumbs-inline img:hover{ transform:scale(1.08); border-color:var(--green); box-shadow:0 4px 10px rgba(31,138,122,.22); }
.ar-imgload{
  width:34px; height:34px; border-radius:5px; border:1px dashed var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--text2); background:#f8fafc;
}
.ar-more{ font-size:11px; color:var(--text2); margin-left:2px; }

/* 弹窗里的缩略图：标出这张已经上传到云存储 */
.cf-thumb .ar-cloud{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(15,23,42,.62); color:#fff;
  font-size:9px; line-height:13px; text-align:center;
}
/* v26：这张**没**传上云端 —— 手机上暂时看不到，要重新上传。
   ⚠️ 用橙色区分，不要让它和「已上传」看起来一样。 */
.cf-thumb .ar-cloud.warn{ background:rgba(180,83,9,.94); font-weight:700; }
/* v13 云南货品：第 1 张图标成主图（列表里显示的就是这张） */
.cf-thumb .cf-main{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(31,138,122,.88); color:#fff;
  font-size:9px; line-height:13px; text-align:center;
}

/* v14 发货列表「发出货品」列：图 + 文字
   44px 是权衡后的尺寸 —— 再小看不清货品，再大这一列会把「物流单号」挤出去 */
.dsp-goods{ display:flex; flex-direction:column; gap:4px; }
.dsp-gimg{ width:44px; height:44px; object-fit:cover; border-radius:6px;
  border:1px solid var(--line); cursor:pointer; display:inline-block; background:#f6faf9; }
.dsp-gimg:hover{ border-color:var(--green); box-shadow:0 2px 8px rgba(15,107,94,.18); }
.dsp-gtext{ font-size:11px; color:var(--text2); max-width:180px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 大图查看 */
#imgViewer{
  position:fixed; inset:0; z-index:400; display:none;
  background:rgba(8,12,20,.92);
  align-items:center; justify-content:center; flex-direction:column; gap:12px;
  padding:16px;
}
#imgViewer.show{ display:flex; }
#imgViewer img{
  max-width:100%; max-height:82vh; object-fit:contain;
  border-radius:8px; box-shadow:0 16px 50px rgba(0,0,0,.5);
}
#imgViewer .iv-bar{ display:flex; align-items:center; gap:14px; color:#fff; font-size:12.5px; }
#imgViewer .iv-bar button{
  padding:7px 18px; border-radius:8px; font-size:12.5px; cursor:pointer;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff;
}

/* 手机端：缩略图抬到 44px（手指点得准），录入按钮独占一行，大图让开安全区 */
@media (max-width:760px){
  .ar-thumbs-inline img, .ar-imgload{ width:44px; height:44px; }
  .ar-toolbar .btn{ flex:1 1 100%; justify-content:center; }
  #imgViewer{ padding:calc(14px + var(--sat)) 12px calc(14px + var(--sab)); }
  #imgViewer img{ max-height:76vh; }
}

/* ===== v13 客户名输入联想（浮层 · 不走 modal） =====
   ⚠️ position:fixed 而不是 absolute：输入框在弹窗里，
   弹窗有自己的层叠上下文，absolute 会被裁掉。fixed + 实时算位置最稳。 */
.cs-box{
  position:fixed; z-index:9999; display:none;
  background:var(--card); border:1px solid var(--green-line);
  border-radius:10px; box-shadow:0 10px 34px rgba(15,107,94,.20);
  max-height:286px; overflow-y:auto; padding:4px;
}
.cs-box.show{ display:block; }
.cs-item{
  display:flex; flex-direction:column; gap:2px;
  padding:7px 10px; border-radius:7px; cursor:pointer;
}
.cs-item:hover, .cs-item.on{ background:var(--green-soft); }
.cs-name{ font-size:13px; font-weight:600; color:var(--text); }
.cs-name b{ color:var(--green-deep); background:rgba(31,138,122,.13); border-radius:3px; padding:0 1px; }
.cs-meta{ font-size:11px; color:var(--text2); }

/* ===== v13 表格批量导入：列映射 / 四类计数 / 样例 ===== */
.bi-block{ margin-top:12px; }
.bi-block-t{ font-size:12px; font-weight:600; color:var(--text); margin-bottom:6px; }
.bi-maps{ display:flex; flex-wrap:wrap; gap:6px; }
.bi-map{
  font-size:11px; padding:3px 9px; border-radius:20px;
  background:var(--green-soft); color:var(--green-deep); border:1px solid var(--green-line);
}
.bi-map.off{ background:var(--line2); color:var(--text2); border-color:var(--line); }
.bi-counts{ display:flex; flex-wrap:wrap; gap:8px; }
.bi-c{
  font-size:12px; padding:5px 12px; border-radius:8px;
  background:var(--line2); color:var(--text2); border:1px solid var(--line);
}
.bi-c b{ font-size:14px; }
.bi-c.add{ background:var(--green-soft); color:var(--green-deep); border-color:var(--green-line); }
.bi-c.upd{ background:#FFF7E6; color:#9A6207; border-color:#F5E0B0; }
.bi-c.skip{ background:#F1F5F9; color:#64748B; }
.bi-c.err{ background:#FDECEC; color:var(--red); border-color:#F5C6C8; }
.bi-warn, .bi-err{
  margin-top:8px; padding:8px 10px; border-radius:8px;
  background:#FFFBEB; border:1px solid #F5E0B0; color:#8A6100;
  font-size:11.5px; line-height:1.7;
}
.bi-err{ background:#FDECEC; border-color:#F5C6C8; color:var(--red); }
.bi-sample{ margin-top:8px; border:1px solid var(--line); border-radius:8px; padding:6px; }
.bi-row-s{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:12px; padding:4px 6px; border-bottom:1px solid var(--line2);
}
.bi-row-s:last-child{ border-bottom:none; }
.bi-tag{ font-size:10px; padding:1px 7px; border-radius:20px; flex:0 0 auto; }
.bi-tag.add{ background:var(--green-soft); color:var(--green-deep); }
.bi-tag.upd{ background:#FFF7E6; color:#9A6207; }
.bi-tag.skip{ background:#F1F5F9; color:#64748B; }
.bi-text{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; line-height:1.7; }

/* ===================================================================
 * v31 今日指挥台（首屏 KPI 四卡 + 待办清单 + 在途批次 + 模块入口）
 * -------------------------------------------------------------------
 * 设计稿：Ardot「翡翠全链路工作台 · UI 重设计」（2026-09-30）
 * 口径：墨玉绿 #0F5C4E → 玉润绿 #1F8A7A；珊瑚红只给逾期/高危；
 *       卡片纯白 + 描边 + 双层阴影；**不用灰底**（正式版要求）。
 * 布局：KPI 四卡 → [待办主区 | 在途次区] → 模块入口。
 * ===================================================================*/
.dash{ display:flex; flex-direction:column; gap:20px; }

/* ---- 页头 ---- */
.dash-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.dash-title{ margin:0; font-size:21px; font-weight:700; color:var(--text); letter-spacing:.2px; }
.dash-sub{ margin:3px 0 0; font-size:12.5px; color:var(--text2); }
.dash-date{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--text2); font-variant-numeric:tabular-nums;
}
.dash-syn{
  width:7px; height:7px; border-radius:50%; background:var(--s1);
  box-shadow:0 0 0 3px rgba(16,185,129,.16);
}

/* ---- ① KPI 四卡 ---- */
.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.kpi-card{
  display:flex; flex-direction:column; gap:8px; text-align:left;
  padding:16px 18px; border-radius:12px;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(15,107,94,.05), 0 4px 14px rgba(15,107,94,.05);
  transition:transform .14s, box-shadow .14s, border-color .14s;
}
.kpi-card:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(15,107,94,.07), 0 8px 22px rgba(15,107,94,.09);
  border-color:var(--green-line);
}
.kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpi-label{ font-size:12.5px; font-weight:500; color:var(--text2); }
.kpi-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.kpi-dot.tone-red{ background:var(--red); }
.kpi-dot.tone-amber{ background:var(--orange); }
.kpi-dot.tone-green{ background:var(--green); }
.kpi-num{
  font-size:32px; font-weight:700; line-height:1.05; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.kpi-num.tone-red{ color:var(--red); }
.kpi-foot{
  font-size:11px; color:#9AA4B2; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


/* 指挥台页头里的「导出 JSON」按钮（外层标题行已隐藏，功能挪到这里） */
.dash-date{ display:flex; align-items:center; gap:12px; }
.dash-datetext{ display:flex; align-items:center; gap:7px; }
.dash-xbtn{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:7px; font-size:12px;
  color:var(--green-deep); background:#fff; border:1px solid var(--line);
  transition:.13s;
}
.dash-xbtn:hover{ background:var(--green-soft); border-color:var(--green-line); }

/* ---- ② 两栏：待办主区 + 在途次区 ---- */
.dash-cols{ display:grid; grid-template-columns:1fr 340px; gap:12px; align-items:start; }
.dash-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 1px 2px rgba(15,107,94,.05), 0 4px 14px rgba(15,107,94,.05);
  overflow:hidden;
}
.dash-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--line2);
}
.dash-card-title{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text); }
.dash-pill{
  font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:99px;
  background:#FDECEC; color:var(--red);
}
.dash-pill.ok{ background:var(--green-soft); color:var(--green-deep); }
.dash-more{
  font-size:12px; color:var(--green-deep); padding:3px 7px; border-radius:6px;
  transition:.12s;
}
.dash-more:hover{ background:var(--green-soft); }
.dash-rows{ display:flex; flex-direction:column; }

/* 待办行：左侧状态色条 + 主文/副文 + 右侧标签 */
.dash-row{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:11px 16px 11px 18px; cursor:pointer;
  border-bottom:1px solid var(--line2); transition:background .12s;
}
.dash-row:last-child{ border-bottom:0; }
.dash-row:hover{ background:#FBFDFC; }
.dash-row::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3.5px;
}
.dash-row.sev-red::before{ background:var(--red); }
.dash-row.sev-amber::before{ background:var(--orange); }
.dash-row.sev-green::before{ background:var(--green); }
.dash-row-l{ min-width:0; flex:1; }
.dash-row-t{
  font-size:13px; font-weight:500; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dash-row-s{
  font-size:11px; color:var(--text2); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dash-row-r{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:none; }
.dash-row-tag{ font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.dash-row-tag.sev-red{ color:var(--red); }
.dash-row-tag.sev-amber{ color:var(--orange); }
.dash-row-tag.sev-green{ color:var(--green-deep); }
.dash-row-amt{ font-size:10.5px; color:#9AA4B2; font-variant-numeric:tabular-nums; }

/* ---- 在途批次 ---- */
.batch-rows{ display:flex; flex-direction:column; }
.batch-row{
  padding:12px 16px; cursor:pointer; border-bottom:1px solid var(--line2);
  transition:background .12s;
}
.batch-row:last-child{ border-bottom:0; }
.batch-row:hover{ background:#FBFDFC; }
.batch-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.batch-code{ display:flex; align-items:center; gap:7px; min-width:0; }
.batch-no{
  font-size:12.5px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.batch-chip{
  font-size:10px; font-weight:600; padding:1.5px 7px; border-radius:99px; flex:none;
  background:var(--green-soft); color:var(--green-deep);
}
.batch-chip.land{ background:#FFF6E5; color:#9A6207; }
.batch-day{
  font-size:11.5px; font-weight:600; color:var(--text2); flex:none;
  font-variant-numeric:tabular-nums;
}
.batch-day.over{ color:var(--red); }
.batch-track{
  height:5px; border-radius:99px; background:#EDF2F0; overflow:hidden; margin:8px 0 6px;
}
.batch-fill{ display:block; height:100%; border-radius:99px; }
.batch-fill.ok{ background:var(--green); }
.batch-fill.warn{ background:var(--orange); }
.batch-fill.over{ background:var(--red); }
.batch-foot{
  font-size:10.5px; color:#9AA4B2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---- 空态 ---- */
.dash-empty{
  padding:28px 18px; text-align:center; font-size:12.5px; color:#9AA4B2; line-height:1.7;
}
.dash-empty.small{ padding:22px 16px; font-size:12px; }

/* ---- ③ 工作模块入口 ---- */
.mod-sec{ display:flex; flex-direction:column; gap:10px; }
.mod-sec-head{ display:flex; align-items:baseline; justify-content:space-between; }
.mod-sec-title{ font-size:14px; font-weight:600; color:var(--text); }
.mod-sec-hint{ font-size:11.5px; color:#9AA4B2; }
.mod-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.mod-card{
  display:flex; flex-direction:column; gap:6px; text-align:left;
  padding:14px; border-radius:11px; background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(15,107,94,.04);
  transition:transform .14s, box-shadow .14s, border-color .14s;
}
.mod-card:hover{
  transform:translateY(-1px); border-color:var(--green-line);
  box-shadow:0 2px 4px rgba(15,107,94,.07), 0 8px 20px rgba(15,107,94,.08);
}
.mod-ic{ display:inline-flex; color:var(--green-deep); }
.mod-name{ font-size:13px; font-weight:600; color:var(--text); }
.mod-hint{
  font-size:10.5px; color:#9AA4B2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mod-hint.hot{ color:var(--red); font-weight:600; }

/* ---- 响应式：窄屏收成单列 ---- */
@media (max-width:1100px){
  .dash-cols{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .kpi-row{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .kpi-card{ padding:13px 14px; gap:6px; }
  .kpi-num{ font-size:26px; }
  .mod-grid{ grid-template-columns:repeat(2,1fr); }
  .dash-title{ font-size:18px; }
  .dash-row-t, .dash-row-s{ white-space:normal; }
}

/* ===================================================================
   v46 · 陆运到货核对台（货物核对）
   -------------------------------------------------------------------
   视觉口径（沿用 v46 界面稿）：
     绿 = 已到 · 红 = 未到 · 橙 = AI 认的（待确认，第 3 步才用）· 黄 = 当前选中
   「快」的三条靠样式兜底：
     ① 未到的人排最上面（排序在 JS，样式保证它一样显眼）
     ② 勾选热区 ≥34px（桌面）/ ≥40px（手机），点得中
     ③ 进度条 + 大字件数，不放大看也能扫到
   =================================================================== */

/* 顶部进度条 */
.nt-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 14px; margin-bottom:12px;
}
.nt-batch{ font-weight:700; font-size:15px; }
.nt-num{ font-size:13px; color:var(--text2); white-space:nowrap; }
.nt-num b{ font-size:17px; font-variant-numeric:tabular-nums; }
.nt-num b.ok{ color:#0F6E56; }
.nt-num b.miss{ color:#D32029; }
.nt-grow{ flex:1; }
.nt-track{ width:150px; height:7px; border-radius:4px; background:#E8EAEE; overflow:hidden; flex:none; }
.nt-track i{ display:block; height:100%; background:var(--green); border-radius:4px; transition:width .2s; }
.nt-pct{ font-size:12px; color:var(--text2); font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }

/* 清单列表 */
.nt-list{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.nt-grp{
  font-size:11px; font-weight:700; color:var(--text2);
  padding:9px 14px 6px; background:#FAFBFC; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:7px;
}
.nt-row{
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1px solid var(--line2); cursor:pointer;
}
.nt-row:hover{ background:#F8F9FB; }
.nt-row.sel{ background:var(--green-soft); }

/* 勾选框：整人一键全到 */
.nt-box{
  width:34px; height:34px; border-radius:8px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; color:#fff; background:#fff; flex:none;
  transition:.12s;
}
.nt-row.miss .nt-box{ border-color:#F0B4B6; background:#FFF5F5; }
.nt-row.miss .nt-box:hover{ background:#FDECEC; border-color:var(--red); }
.nt-box.on{ background:#0F6E56; border-color:#0F6E56; }

.nt-name{ flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nt-row.done .nt-name{ color:#0F6E56; font-weight:700; }
.nt-fold{ font-size:12px; color:var(--text2); flex:none; padding:0 4px; }
.nt-ct{
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  padding:3px 10px; border-radius:20px; background:#F1F5F4; color:var(--text2); flex:none;
}
.nt-ct.done{ background:#E6F4F1; color:#0F6E56; }
.nt-ct.miss{ background:#FDECEC; color:#D32029; }

/* 展开的件 */
.nt-kids{ background:#FAFBFC; border-bottom:1px solid var(--line); }
.nt-kid{
  display:flex; align-items:center; gap:9px;
  padding:7px 14px 7px 46px; font-size:13px; color:var(--text2);
}
.nt-kid.on{ color:#0F6E56; }
.nt-kbox{
  width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; background:#fff; flex:none; cursor:pointer;
}
.nt-kbox.on{ background:#0F6E56; border-color:#0F6E56; }
.nt-kname{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.nt-kname:hover{ text-decoration:underline; }
.nt-kqty{ font-size:12px; font-variant-numeric:tabular-nums; flex:none; color:var(--text2); }
.nt-kdel{
  flex:none; width:22px; height:22px; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#9AA2B1;
}
.nt-kdel:hover{ background:#FDECEC; color:var(--red); }
.nt-kadd{
  padding:7px 14px 9px 46px; font-size:12px; color:var(--green-deep); cursor:pointer;
}
.nt-kadd:hover{ text-decoration:underline; }

/* 弹窗里的类目选择 */
.nt-cats{ display:flex; gap:6px; flex-wrap:wrap; margin-top:5px; }
.nt-cat{
  padding:6px 13px; border-radius:7px; border:1px solid var(--line);
  background:#fff; font-size:12px; color:var(--text2); cursor:pointer;
}
.nt-cat:hover{ border-color:var(--green); color:var(--green-deep); }
.nt-cat.on{ background:var(--green); border-color:var(--green); color:#fff; font-weight:700; }

/* 手机端（红米 K70 Pro / 393px）：勾选热区加大、边距收紧 */
@media (max-width:900px){
  .nt-bar{ padding:9px 12px; gap:8px; }
  .nt-batch{ font-size:14px; }
  .nt-num b{ font-size:16px; }
  .nt-track{ width:90px; }
  .nt-row{ padding:8px 12px; gap:9px; }
  .nt-box{ width:40px; height:40px; }
  .nt-kid{ padding-left:38px; }
  .nt-kbox{ width:26px; height:26px; }
  .nt-kadd{ padding-left:38px; }
  .nt-kdel{ width:26px; height:26px; }
}