/* 柯米特聚合办公综合平台 · 样式（浅色主题） */
:root{
  --bg:#f4f6f8;
  --panel:#ffffff;
  --panel-2:#fafbfc;
  --line:#e3e8ee;
  --line-2:#eef2f6;
  --txt:#1f2a36;
  --txt-2:#5b6b7c;
  --txt-3:#8b98a6;
  --brand:#1f7a4d;
  --brand-2:#2a9d63;
  --brand-soft:#e8f5ee;
  --blue:#2563eb;
  --blue-soft:#eaf1fe;
  --red:#d92c2c;
  --red-soft:#fdecec;
  --orange:#d97706;
  --orange-soft:#fdf3e4;
  --green:#1a9c5b;
  --green-soft:#e8f7ef;
  --gray-soft:#f1f4f7;
  --shadow:0 1px 2px rgba(16,32,48,.05), 0 4px 14px rgba(16,32,48,.06);
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--txt);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.muted{color:var(--txt-2)}
a{color:var(--blue);text-decoration:none}
b{font-weight:600}

/* ---------------- 按钮 ---------------- */
.btn{
  font-family:inherit;font-size:13px;padding:7px 14px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--txt);cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{background:var(--gray-soft);border-color:#cfd8e0}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-danger{background:#fff;border-color:#f0c4c4;color:var(--red)}
.btn-danger:hover{background:var(--red-soft)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-block{width:100%;display:block}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------------- 登录 ---------------- */
/* 2026-09-18 第 37 批：加备案号后，这一屏变成上下两段（上面卡片、下面备案号）。
   改成 column 之后，原来那句 align-items:center 正好由"纵向居中"变成"横向居中"，
   卡片靠 .login-card 的上下 auto 边距继续垂直居中 —— 视觉位置只上移约 20px（备案号那行高度的一半）。
   ⚠️ 别把 flex-direction 单独删掉：删了卡片和备案号会并排成左右两块。 */
.login-wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,#eef4f0 0%,#f4f6f8 45%,#eef2f8 100%)}
/* 上下 auto 把剩余空间都吸到卡片两侧 => 卡片垂直居中，备案号被顶到页面最底部。
   （flex 的 auto 边距优先于 justify-content，所以这里不需要动 justify-content） */
.login-card{width:100%;max-width:520px;margin-top:auto;margin-bottom:auto;background:#fff;border-radius:16px;padding:30px 32px;box-shadow:var(--shadow);border:1px solid var(--line)}
.login-brand{display:flex;gap:14px;align-items:center;margin-bottom:24px}
.logo{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex:0 0 auto}
.logo.sm{width:34px;height:34px;font-size:16px;border-radius:9px}
/* ── 品牌 logo（2026-09-12 皓哥给的横版 logo 拆出来的两张图）──────────────
   登录页用横版整图（110x42）；侧边栏那格只有 34px，横版缩到那个尺寸中英文字会糊，
   而且会把平台名挤成两行、导航下移，所以改用「只有三叶片」的方形图（34x34）。
   ⚠️ 两张都是透明底，登录卡片 / 侧边栏都是白底，视觉上等于原图；
      若将来放到深色底（如经营数据大屏 #071a2d），黑字会看不见，那种位置要用白字版。
   上面 .logo / .logo.sm 两个旧类已没有地方在用（原先是渐变方块写「柯」字），
   留着不删：删样式一旦漏了某处就是"整块样式塌"，留着只是几行死代码，风险不对等。 */
.logo-img{height:42px;width:auto;display:block;flex:0 0 auto}
.logo-mark{width:34px;height:34px;display:block;flex:0 0 auto}

.login-brand h1{font-size:18px;letter-spacing:.2px}
.login-brand p{font-size:12px;color:var(--txt-3);margin-top:2px}
.login-form label{display:block;font-size:12px;color:var(--txt-2);margin:12px 0 5px}
.login-form input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--txt)}
.login-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.login-form .btn{margin-top:18px;padding:11px}
.login-msg{font-size:12.5px;color:var(--red);margin-top:10px;min-height:18px}
/* 2026-09-16 第 28 批：「快速选择身份」整块去掉，连同它的 5 条样式
   （.login-quick / .quick-title / .quick-grid / .quick-item / .quick-item:hover）。
   ⚠️ 注意别顺手删掉 .quick-bar（第 894 行）—— 那个名字像，但是**采购页在用的**另一套样式。 */
/* 勾选框要和普通 label 区分：`.login-form label` 是"12px 灰色小标题 + block"，
   而这一行是"选项"本身 —— 得跟正文一样大、勾选框与文字同一行对齐。
   ⚠️ 所以选择器要写 `.login-form .lg-remember`（0,2,0）：单写 `.lg-remember`（0,1,0）
     压不过 `.login-form label`（0,1,1），样式会静默不生效、看起来"没做"。 */
.login-form .lg-remember{display:flex;align-items:center;gap:7px;margin:2px 0 0;font-size:13px;color:var(--txt);cursor:pointer;user-select:none}
.login-form .lg-remember input{width:auto;margin:0;padding:0;cursor:pointer}
/* 隐私说明：故意压到 11.5px、浅灰 —— 是提示，不是警告，不该抢登录按钮的注意力 */
.lg-tip{font-size:11.5px;color:var(--txt-3);line-height:1.6;margin-top:6px}
.login-foot{margin-top:20px;font-size:11.5px;color:var(--txt-3);line-height:1.7}
/* 备案号（2026-09-18 第 37 批）：法规要求"主页底部中央标明备案编号 + 链接工信部"。
   ⚠️ 故意**不**沿用上面 .login-foot 那套（11.5px + --txt-3 浅灰，注释里写明是"故意压小压淡"）——
      备案号抽查要求字号不小于 12px、颜色看得清、不能被遮挡，压淡了会被判"不显著"。
      所以这里 12.5px + --txt-2（比 --txt-3 深一档），链接常显下划线（一眼看出能点）。
   ⚠️ 宽度跟卡片对齐（100% / max-width:520px），保证"居中"这件事和卡片是同一条中线。 */
.login-icp{flex:0 0 auto;width:100%;max-width:520px;padding:18px 0 2px;text-align:center;font-size:12.5px;color:var(--txt-2)}
.login-icp a{color:var(--txt-2);text-decoration:underline;text-underline-offset:2px}
.login-icp a:hover{color:var(--brand)}

/* ---------------- 布局 ---------------- */
.app{display:flex;min-height:100vh}
.sidebar{width:206px;flex:0 0 206px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
/* 站名改「柯米特聚合办公综合平台」(11 字) 后要保证一行放得下：
   206px - 24px(padding) - 34px(logo) - 8px(gap) = 140px 可用，12px 中文约 132px，余 8px。
   ⚠️ 别把字号调回 13px：143px 会折成两行，把品牌区撑高、导航整体下移。 */
.side-brand{display:flex;gap:8px;align-items:center;padding:16px 12px;border-bottom:1px solid var(--line-2)}
.side-brand-txt b{display:block;font-size:12px;line-height:1.3}
.side-brand-txt span{font-size:11px;color:var(--txt-3)}
.nav{padding:10px 8px;overflow-y:auto;flex:1}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;cursor:pointer;color:var(--txt-2);font-size:13.5px;margin-bottom:2px}
.nav-item:hover{background:var(--gray-soft);color:var(--txt)}
.nav-item.active{background:var(--brand-soft);color:var(--brand);font-weight:600}
.nav-item .ico{width:17px;text-align:center;font-size:14px}
.nav-sep{font-size:11px;color:var(--txt-3);padding:12px 11px 4px;letter-spacing:.5px}
.side-foot{padding:12px;border-top:1px solid var(--line-2)}
.side-user{display:flex;gap:9px;align-items:center;margin-bottom:10px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:0 0 auto}
.side-user b{display:block;font-size:13px;line-height:1.3}
.side-user span{font-size:11px;color:var(--txt-3)}
.side-foot .btn{margin-top:5px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:14px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.topbar h2{font-size:16.5px}
.topbar p{font-size:12.5px;margin-top:1px}
.topbar-right{display:flex;gap:9px;align-items:center}
.content{padding:20px 22px 60px;flex:1}

/* ---------------- 通用组件 ---------------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.card + .card{margin-top:14px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}
.card-head h3{font-size:14.5px;display:flex;align-items:center;gap:7px}
.card-head h3::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--brand)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1180px){.g6{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}

/* ---------------- 手机端置顶导航（窄屏专用） ----------------
   窄屏下 .sidebar 是 display:none，没有这条顶部导航就切不了模块。
   做成 position:sticky 吸顶 + 横向可滑，当前模块自动滚到中间。 */
.m-nav{display:none}
.m-chip{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:7px 13px;border-radius:20px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--txt-2);
  font-size:13.5px;white-space:nowrap;cursor:pointer;
}
.m-chip .ico{font-size:13px;line-height:1}
.m-chip.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.m-user{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  font-size:14px;font-weight:600;font-family:inherit;
}
@media(max-width:820px){
  .g2,.g3,.g4,.g6{grid-template-columns:1fr}
  .sidebar{display:none}
  /* 顶部导航吸顶 → 原 topbar 不再吸顶，避免两条吸顶栏互相压住 */
  .m-nav{
    display:flex;align-items:center;gap:8px;
    position:sticky;top:0;z-index:30;
    background:#fff;border-bottom:1px solid var(--line);
    padding:8px 10px;
    box-shadow:0 2px 8px rgba(16,32,48,.05);
  }
  .m-nav-scroll{
    flex:1;min-width:0;display:flex;gap:7px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .m-nav-scroll::-webkit-scrollbar{display:none}
  .topbar{position:static;padding:11px 13px;align-items:flex-start}
  .topbar h2{font-size:15.5px}
  .topbar p{display:none}                 /* 小屏省一行，说明文字挤在一起没用 */
  .topbar-right{gap:7px;flex:0 0 auto}
  .content{padding:13px 12px 70px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .tab{white-space:nowrap;flex:0 0 auto}
  .modal{padding:12px}
  .modal-box{max-height:92vh}
}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:500;white-space:nowrap}
.pill-red{background:var(--red-soft);color:var(--red)}
.pill-orange{background:var(--orange-soft);color:var(--orange)}
.pill-green{background:var(--green-soft);color:var(--green)}
.pill-blue{background:var(--blue-soft);color:var(--blue)}
.pill-gray{background:var(--gray-soft);color:var(--txt-2)}
.tag{display:inline-block;padding:1px 7px;border-radius:5px;background:var(--gray-soft);color:var(--txt-2);font-size:11.5px;margin-right:4px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--panel-2);color:var(--txt-2);font-weight:600;text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12.5px}
td{padding:9px 11px;border-bottom:1px solid var(--line-2);vertical-align:top}
tbody tr:hover{background:var(--panel-2)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:9px;background:#fff}
.empty{padding:30px;text-align:center;color:var(--txt-3);font-size:13px}
.bar{height:7px;border-radius:4px;background:var(--gray-soft);overflow:hidden;margin-top:6px}
.bar > i{display:block;height:100%;border-radius:4px;background:var(--brand-2);transition:width .4s}
.hr{height:1px;background:var(--line-2);margin:14px 0}

/* 统计卡 */
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;box-shadow:var(--shadow)}

/* ---- 工作台「今日数据填报」（网店日报，2026-09-12 第 6 批） ---- */
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.sh-item{border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;background:var(--gray-soft)}
.sh-item.ok{border-color:var(--brand-2);background:var(--brand-soft)}
.sh-nm{font-size:12.5px;color:var(--txt-2);font-weight:600}
.sh-v{font-size:17px;font-weight:700;margin:3px 0 1px;color:var(--txt)}
.sh-item.ok .sh-v{color:var(--brand)}
.sh-s{font-size:11px;color:var(--txt-3)}
.sh-foot{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--txt-2)}

/* ---- 费用报销卡（2026-09-12 第 16 批：工作台入口，全员都能提交）----
   状态色直接用现成的 .pill-* （红/橙/蓝/绿/灰），这里只管排版。 */
.ex-list{display:flex;flex-direction:column;gap:7px}
.ex-row{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:6px 9px;
  border:1px solid var(--line);border-radius:7px;background:var(--panel-2);cursor:pointer;transition:.15s}
.ex-row:hover{border-color:var(--brand);background:var(--brand-soft)}
.ex-no{flex:0 0 auto;font-size:11.5px;color:var(--txt-3);font-variant-numeric:tabular-nums}
.ex-what{flex:1;min-width:0;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-amt{flex:0 0 auto;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}
.ex-st{flex:0 0 auto}
.ex-foot{margin-top:9px;padding-top:9px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--txt-3);line-height:1.8}
.ex-empty{font-size:12.5px;color:var(--txt-2);line-height:1.95}
.sh-tb{width:100%}
.sh-tb th{white-space:nowrap}
.sh-tb td{padding:6px 8px}
.sh-in{width:100%;max-width:112px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;
  font-size:13px;font-family:inherit;text-align:right;background:#fff}
.sh-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
/* 别人填的行：灰底 + 不可编辑。视觉上就要让人看出"这行不是我的" */
.sh-tb tr.ro .sh-in{background:var(--gray-soft);color:var(--txt-3);cursor:not-allowed}

/* ============================================================ 数据大屏
   2026-09-12 第 6 批（皓哥定）：经典数据大屏 + 全屏观看。
   ⚠️ 这里的颜色**全部写死**、不引用 :root 的主题变量 —— 大屏是深色的，
      平台其余页面是浅色的。一旦借用了 var(--txt) 这类变量，哪天主题一调，
      大屏就会变成白底黑字，投到电视上直接瞎。改这里请改死值。
   ============================================================ */
.screen{background:linear-gradient(160deg,#071a2d 0%,#0b2540 55%,#0a1e33 100%);
  border:1px solid #1d3f5e;border-radius:12px;padding:14px 16px 16px;color:#dbe9f5;
  box-shadow:0 8px 30px rgba(6,24,42,.28)}
.screen:fullscreen{border-radius:0;padding:18px 22px;overflow:auto}
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid #1d3f5e;flex-wrap:wrap}
.sc-title{font-size:17px;font-weight:700;letter-spacing:.5px;color:#eaf5ff}
.sc-title span{margin-left:9px;font-size:12.5px;font-weight:400;color:#5f8cad}
.sc-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sc-upd{font-size:11.5px;color:#5f8cad;font-variant-numeric:tabular-nums}
.sc-d,.sc-btn{background:rgba(56,189,248,.08);border:1px solid #24506f;color:#9dc7e6;
  border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:inherit}
.sc-d:hover,.sc-btn:hover{border-color:#38bdf8;color:#dff1ff}
.sc-d.on{background:rgba(56,189,248,.22);border-color:#38bdf8;color:#eaf7ff;font-weight:600}
.sc-btn.primary{background:rgba(56,189,248,.18);border-color:#38bdf8;color:#eaf7ff}

.sc-wrap{display:grid;grid-template-columns:minmax(220px,1.05fr) 1.5fr minmax(230px,1.05fr);gap:12px}
.sc-col{display:flex;flex-direction:column;gap:12px;min-width:0}
/* 三列底边拉齐（2026-09-12 皓哥要求「中间三个模块下边线拉齐」）：
   三列本身是等高的（grid 默认 stretch，实测三列列底边都是 663），但列内卡片是按内容
   自然往下堆的、三列的卡片数还不一样（2/2/3 张），于是"最后一张卡的下边"差了 81px
   （实测 663 / 582 / 622），大屏上看就是参差不齐。
   让列内卡片按剩余空间等比撑开 —— 每列都填满列高，底边自然落在同一条线上。
   ⚠️ 用 flex:1 1 auto 而不是 flex:1：auto 的 flex-basis 保证卡片不会被压到内容高度以下，
      内容最多的那列（核心指标）原样不动，只有短的列被撑开。 */
.screen .sc-col > .sp{flex:1 1 auto}
/* ⚠️⚠️ 必须写 `.screen .sp`，不能写裸 `.sp`（2026-09-12 实测踩到）：
   `.sp` 是个很泛的类名，**普通页面里也在用** —— 待审批行的往来单位、迷你行和工具条的说明文字
   都是 `<span class="sp">`，配着 `.pend-row .sp` / `.mini-row .sp` / `.toolbar .sp` 三条
   「只管 flex」的规则。第 6 批把大屏卡片样式写成裸 `.sp`，于是那些 span 全被糊上了深蓝底：
   浏览器实测 background=rgba(18,52,82,.5)、border=1px solid #1d3f5e、padding=11px 13px、高 45px ——
   在浅色页面（底色 rgb(244,246,248)）上就是一块块深色方块。
   改完务必用 `bash _shot_b6.sh 3580 _diag_sp.js` 复核一次（注入真实结构、读 computed style）。 */
.screen .sp{background:rgba(18,52,82,.5);border:1px solid #1d3f5e;border-radius:9px;padding:11px 13px}
.sp-h{font-size:12.5px;font-weight:600;color:#8fb9d9;letter-spacing:.4px;margin-bottom:9px;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sp-s{font-size:11px;font-weight:400;color:#4d7593}
/* ⚠️ 下面这几条**必须带 .screen 前缀**：`.sp` 这个名字不是大屏专用的 ——
   普通页面里也有 `<span class="sp">`（配着 .toolbar .sp / .pend-row .sp / .mini-row .sp 三条规则在用）。
   写成裸 `.sp{display:flex;flex-direction:column}`，那些 span 会一起变成纵向 flex 容器、文本不再正常折行。
   教训：改这种"短类名"之前先 grep 一遍谁在用。
   卡片被撑高之后，内容不能还挤在上半截、底下空一片 —— 让内容区自己吃掉多出来的高度：
   图表会长高、榜单行距会拉开，整屏看着"饱满"。实测第 2 列「各平台销售额」原来底下空 53px，就靠这个补掉。
   ⚠️ 不含 .sc-sale（产品销量那张卡里 .sc-sale + .sc-rank 是两兄弟，
      两个都 flex:1 会平分空间，把那个大数字顶到半空去）。 */
.screen .sp{display:flex;flex-direction:column}
.screen .sp-h{flex:0 0 auto}
.screen .sp > .sc-kpi,
.screen .sp > .sc-chart,
.screen .sp > .sc-rank,
.screen .sp > .sc-lines,
.screen .sp > .sc-nodes{flex:1 1 auto}

.sc-kpi{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* 卡片被撑高后格子也跟着变高，内容顶在上边会显出一截空 —— 垂直居中，
   于是"有副标题的格子"和"没副标题的格子"看起来一样饱满。 */
.sc-k{background:rgba(11,37,62,.72);border:1px solid #1b3a56;border-radius:7px;padding:8px 10px;
  display:flex;flex-direction:column;justify-content:center}
.sc-kk{font-size:11.5px;color:#5f8cad}
.sc-kv{font-size:22px;font-weight:800;color:#38bdf8;line-height:1.25;
  font-variant-numeric:tabular-nums;letter-spacing:.3px;word-break:break-all}
.sc-k.acc .sc-kv{color:#5ee9b5}
.sc-k.bad .sc-kv{color:#ff7b7b}
.sc-ks{font-size:11px;color:#5f8cad}

.sc-chart{display:flex;align-items:flex-end;gap:6px;height:150px}
.sc-b{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center}
.sc-bv{font-size:10px;color:#6f9cbd;margin-bottom:2px;white-space:nowrap}
/* 柱子的高度百分比要有一个"有确定高度"的父层才准，所以中间夹一层 .sc-bw */
.sc-bw{flex:1;width:100%;display:flex;align-items:flex-end}
.sc-bw i{display:block;width:100%;max-width:40px;margin:0 auto;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#38bdf8,#1a5f92);box-shadow:0 0 12px rgba(56,189,248,.35)}
.sc-bd{font-size:10px;color:#5f8cad;margin-top:5px;white-space:nowrap}

/* gap 定"最小行距"、space-between 把行在卡片里均匀推开 —— 两个一起用，行距有下限又铺得满。
   只加 flex:1 而不加 space-between 的话，行还是贴着顶排，空白照样堆在卡片底部。 */
.sc-rank{display:flex;flex-direction:column;gap:7px;justify-content:space-between}
.sc-r{display:flex;align-items:center;gap:8px;font-size:12px}
.sc-r.zero{opacity:.45}
.sc-rn{width:74px;flex:0 0 auto;color:#a8cee8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-rb{flex:1;height:11px;background:rgba(11,37,62,.8);border-radius:6px;overflow:hidden;min-width:30px}
.sc-rb i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#1a5f92,#38bdf8)}
.sc-rv{width:58px;text-align:right;color:#dbe9f5;font-variant-numeric:tabular-nums;flex:0 0 auto}
.sc-ro{width:44px;text-align:right;color:#5f8cad;font-size:11px;flex:0 0 auto}

.sc-cash{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.sc-cash b{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;color:#5ee9b5;letter-spacing:.5px}
.sc-cash b span{font-size:14px;font-weight:600;margin-left:2px}
.sc-cash em{font-style:normal;font-size:12px;padding:2px 8px;border-radius:20px;
  background:rgba(94,233,181,.14);color:#5ee9b5;border:1px solid rgba(94,233,181,.3)}
/* 资金水位四档配色，跟财务页的红线口径一一对应（safe/warn/red/danger/dead）
   ⚠️ 2026-09-12 第 16 批起：大屏不再显示「资金水位」这块（皓哥定，位置让给产品销量），
      所以下面这组 .sc-cash 类**当前没有任何页面在用**。
      留着不删是有意的：将来资金水位要回大屏，样式现成、不用重写。 */
.sc-cash.warn b,.sc-cash.warn em{color:#ffd166}
.sc-cash.warn em{background:rgba(255,209,102,.14);border-color:rgba(255,209,102,.3)}
.sc-cash.red b,.sc-cash.red em,.sc-cash.danger b,.sc-cash.danger em,
.sc-cash.dead b,.sc-cash.dead em{color:#ff7b7b}
.sc-cash.red em,.sc-cash.danger em,.sc-cash.dead em{background:rgba(255,123,123,.14);border-color:rgba(255,123,123,.32)}
.sc-basis{font-size:11px;color:#5f8cad;line-height:1.7}

/* ---- 产品销量（第 16 批：替掉原来那块「资金水位」）---- */
.sc-sale{display:flex;align-items:baseline;gap:6px;margin-bottom:9px}
.sc-sale b{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;color:#38bdf8;letter-spacing:.5px}
.sc-sale span{font-size:13px;font-weight:600;color:#5f8cad}
.sc-sale em{font-style:normal;font-size:11.5px;margin-left:auto;color:#7fc4e8;
  background:rgba(56,189,248,.13);border:1px solid rgba(56,189,248,.26);border-radius:20px;padding:2px 8px}
.sc-sl{display:flex;align-items:center;gap:8px;font-size:12px}
.sc-sl-n{flex:1;min-width:0;color:#a8cee8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-sl-b{flex:0 0 52px;height:10px;background:rgba(11,37,62,.8);border-radius:5px;overflow:hidden}
.sc-sl-b i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#1a5f92,#38bdf8)}
.sc-sl-v{flex:0 0 auto;min-width:20px;text-align:right;color:#dbe9f5;font-weight:700;
  font-variant-numeric:tabular-nums}

/* ---- 库存商品滚动播放（第 16 批：跨三列贴在整屏最底部）----
   无缝循环 = 内容复制一份 + translateY(-50%)：一份正好占 50%，滚到底时第二份
   接在第一份的位置上，看着就是一直在转。
   ⚠️ 每条的间距**必须用 margin-bottom，不能用 flex gap** ——
      gap 只在子项「之间」生效、末尾不加，两份内容接缝处会少那 6px，滚过去会看到一跳。 */
.sc-mq{grid-column:1/-1}
.sc-mqw{height:88px;overflow:hidden;position:relative}
.sc-mql{display:flex;flex-direction:column}
.sc-mql.roll{animation:scmq 26s linear infinite}
.sc-mqw:hover .sc-mql{animation-play-state:paused}
@keyframes scmq{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.sc-mqi{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:5px 9px;border-radius:6px;
  margin-bottom:6px;background:rgba(11,37,62,.72);border:1px solid #1b3a56}
.sc-mqi.red{border-color:rgba(255,123,123,.42);background:rgba(80,26,32,.5)}
.sc-mqi.orange{border-color:rgba(255,209,102,.36);background:rgba(70,55,20,.45)}
.sc-mqs{flex:0 0 96px;color:#5f8cad;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-mqn{flex:1;min-width:0;color:#a8cee8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-mqc{flex:0 0 76px;text-align:right;color:#dbe9f5;font-weight:700;font-variant-numeric:tabular-nums}
.sc-mqi.red .sc-mqc{color:#ff7b7b}
.sc-mqi.orange .sc-mqc{color:#ffd166}
.sc-mqc i{font-style:normal;font-weight:400;font-size:11.5px;color:#5f8cad}
.sc-mqst{flex:0 0 132px;text-align:right;color:#5f8cad;font-size:11.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-mqi.red .sc-mqst{color:#ff9b9b}
.sc-mqi.orange .sc-mqst{color:#ffd166}

.sc-lines{display:flex;flex-direction:column;gap:6px;justify-content:space-between}
.sc-l{display:flex;justify-content:space-between;font-size:12.5px;color:#9dc7e6}
.sc-l b{color:#dbe9f5;font-variant-numeric:tabular-nums}
.sc-l b.bad{color:#ff7b7b}

.sc-nodes{display:flex;flex-direction:column;gap:7px;justify-content:space-between}
.sc-nd{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 8px;border-radius:6px;
  background:rgba(11,37,62,.72);border:1px solid #1b3a56}
.sc-nd.urgent{border-color:rgba(255,123,123,.42);background:rgba(80,26,32,.5)}
.sc-ndd{color:#5f8cad;font-variant-numeric:tabular-nums;flex:0 0 auto}
.sc-ndt{flex:1;min-width:0;color:#a8cee8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-nd b{color:#ffd166;flex:0 0 auto;font-variant-numeric:tabular-nums}
.sc-nd.urgent b{color:#ff7b7b}
.sc-none{font-size:12px;color:#5f8cad;padding:6px 0}

/* 全屏时整体放大一档：全屏的意义就是"站在远处也看得清" */
.screen:fullscreen .sc-kv{font-size:26px}
.screen:fullscreen .sc-cash b{font-size:38px}
.screen:fullscreen .sc-chart{height:190px}
.screen:fullscreen .sc-title{font-size:20px}
.screen:fullscreen .sc-sale b{font-size:38px}
.screen:fullscreen .sc-mqw{height:118px}
/* 窄屏/手机：三栏堆成一栏（硬撑三列的话每格窄到看不清数字） */
@media (max-width:1080px){
  .sc-wrap{grid-template-columns:1fr}
  .sc-chart{height:120px}
}
.stat .k{font-size:12px;color:var(--txt-2)}
.stat .v{font-size:22px;font-weight:700;margin-top:3px;letter-spacing:-.3px}
.stat .s{font-size:11.5px;color:var(--txt-3);margin-top:2px}
.stat.acc-red .v{color:var(--red)} .stat.acc-orange .v{color:var(--orange)}
.stat.acc-green .v{color:var(--green)} .stat.acc-blue .v{color:var(--blue)}

/* 死节点 */
.node-row{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;margin-bottom:8px}
.node-row.done{opacity:.55}
.node-row.done .node-title{text-decoration:line-through}
.node-date{flex:0 0 82px;font-size:12.5px;font-weight:600;color:var(--txt-2)}
.node-days{flex:0 0 62px;text-align:center;border-radius:7px;padding:4px 0;font-size:12px;font-weight:600}
.node-days.red{background:var(--red-soft);color:var(--red)}
.node-days.orange{background:var(--orange-soft);color:var(--orange)}
.node-days.green{background:var(--green-soft);color:var(--green)}
.node-days.gray{background:var(--gray-soft);color:var(--txt-2)}
.node-title{flex:1;font-size:13.5px}
.node-row .chk{width:17px;height:17px;border:1.5px solid #c6d0da;border-radius:5px;cursor:pointer;flex:0 0 auto;margin-top:2px;
  display:flex;align-items:center;justify-content:center;background:#fff;color:#fff;font-size:11px}
.node-row .chk.on{background:var(--brand);border-color:var(--brand)}

/* 表单填报 */
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;color:var(--txt-2);margin-bottom:5px}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;
  font-family:inherit;background:#fff;color:var(--txt);
}
.field textarea{min-height:74px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field .hint{font-size:11.5px;color:var(--txt-3);margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-size:12.5px;cursor:pointer;user-select:none;background:#fff}
.chip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:600}

/* 表单中心布局 */
.split{display:grid;grid-template-columns:236px 1fr;gap:14px;align-items:start}
@media(max-width:980px){.split{grid-template-columns:1fr}}
.form-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:9px;box-shadow:var(--shadow);max-height:calc(100vh - 150px);overflow-y:auto}
.form-cat{font-size:11px;color:var(--txt-3);padding:10px 9px 4px;letter-spacing:.4px}
.form-item{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--txt-2);display:flex;justify-content:space-between;gap:8px;align-items:center}
.form-item:hover{background:var(--gray-soft);color:var(--txt)}
.form-item.active{background:var(--brand-soft);color:var(--brand);font-weight:600}
.form-item .cnt{font-size:11px;color:var(--txt-3);background:var(--gray-soft);border-radius:10px;padding:0 6px}
.form-item.active .cnt{background:#fff;color:var(--brand)}

/* 组织架构线 */
.line-card{border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;background:#fff;box-shadow:var(--shadow);border-left:4px solid var(--line)}
.line-card.main{border-left-color:var(--brand);background:linear-gradient(180deg,#f5fbf8,#fff 60%)}
.line-card h4{font-size:14px;margin-bottom:3px}
.line-card .sl{font-size:12px;color:var(--brand);margin-bottom:10px}
.line-kv{font-size:12.5px;margin-bottom:7px;line-height:1.65}
.line-kv b{color:var(--txt-2);font-weight:600}

/* 弹窗 */
.modal{position:fixed;inset:0;background:rgba(20,32,44,.42);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}
.modal-box{background:#fff;border-radius:12px;width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.2)}
/* 宽弹层：单据表单里嵌了商品选择面板（8 列），默认 560px 会把表头挤成四行 */
.modal-box-wide{max-width:920px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.modal-head h3{font-size:15px}
.modal-x{border:none;background:none;font-size:23px;color:var(--txt-3);cursor:pointer;line-height:1;padding:0 3px}
.modal-x:hover{color:var(--txt)}
.modal-body{padding:18px;overflow-y:auto}
.modal-foot{display:flex;gap:9px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--line-2)}

/* toast */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#22303c;color:#fff;
  padding:10px 20px;border-radius:9px;font-size:13.5px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.toast.err{background:#b3261e}

/* 文档库 */
.doc-nav{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.doc-body h4{font-size:14.5px;margin:20px 0 9px;padding-left:9px;border-left:3px solid var(--brand)}
.doc-body h4:first-child{margin-top:4px}
.doc-body p{font-size:13.5px;color:var(--txt-2);margin-bottom:7px;line-height:1.75}
.doc-body table{margin:9px 0 16px;font-size:12.5px}
.doc-body th{background:var(--panel-2)}
.doc-body .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}

/* 进度条组 */
.stage-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.stage-name{flex:0 0 190px;font-size:13px}
.stage-bar{flex:1}
.stage-num{flex:0 0 74px;text-align:right;font-size:12.5px;color:var(--txt-2)}

/* 微型柱状图 */
.chart{display:flex;align-items:flex-end;gap:5px;height:132px;padding:8px 0 0}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.chart .col i{display:block;width:100%;max-width:38px;background:linear-gradient(180deg,var(--brand-2),var(--brand));border-radius:4px 4px 0 0;min-height:2px}
.chart .col span{font-size:10px;color:var(--txt-3);white-space:nowrap;transform:scale(.92)}
.chart .col b{font-size:10.5px;color:var(--txt-2);font-weight:600}

/* ==================== 单据流 · 供应链 · 财务（模块化 V2） ==================== */

/* 页签 */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.tab{padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:13px;
  color:var(--txt-2);cursor:pointer;transition:.15s;font-family:inherit}
.tab:hover{background:var(--gray-soft);color:var(--txt)}
.tab.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.tabs.sub{margin-top:-4px}
.tabs.sub .tab{font-size:12.5px;padding:5px 11px}
.tabs.sub .tab.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}

/* 模块内的「← 返回上一层」（2026-09-15 第 27 批，皓哥定）
   放在模块页签那一行的最左边，点了回本模块的第一个页签。
   眼神上要**明显区别于页签**（页签是方的、它是带箭头的圆按钮），
   否则会被当成"多出来的一个页签"，点下去不知道发生了什么。
   用 margin-right 跟后面的页签拉开一点，形成"它不属于这排页签"的暗示。 */
.tab-back{margin-right:6px;flex:0 0 auto;white-space:nowrap;font-weight:500}
.tab-back:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}

/* 工具条 */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.toolbar .sp{flex:1}
.toolbar input[type=text],.toolbar select,.toolbar input[type=month]{
  font-family:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--txt)}
.toolbar input[type=text]{min-width:190px}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* 表格内数值 / 等宽 / 次级说明 */
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--txt)}
.sub{font-size:11.5px;color:var(--txt-3);line-height:1.45}
td .sub{margin-top:2px}
.money-in{color:var(--green);font-weight:600}
.money-out{color:var(--red);font-weight:600}

/* 单据表单：两列网格 */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-grid .field.span2{grid-column:1 / -1}
@media(max-width:760px){.form-grid{grid-template-columns:1fr}}
.chks{display:flex;flex-wrap:wrap;gap:8px 16px;padding:4px 0}
.chks .chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--txt);cursor:pointer}
.chks .chk input{margin:0}
.fhint{font-size:12px;color:var(--txt-2);background:var(--panel-2);border:1px solid var(--line-2);
  border-left:3px solid var(--brand);border-radius:7px;padding:8px 11px;margin-top:6px;line-height:1.65}
/* 财务放行"未放行"：左边竖条转红。这条是"货卡住了"的原因，不该跟普通灰提示长一样（2026-09-12） */
.fhint.warn{border-left-color:var(--red);background:var(--red-soft);color:var(--txt)}
.hint .req{color:var(--red)}
.field .fhint{margin-top:4px}

/* 单据顶部信息块 */
.doc-top{background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius);padding:13px 15px;margin-bottom:14px}
.doc-top .t{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:11px}
.doc-top .t h4{font-size:15px}
.doc-top .t .mono{font-size:12.5px;color:var(--txt-2)}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px 18px}
.kv{font-size:12.5px;line-height:1.6;min-width:0}
.kv .k{color:var(--txt-3);font-size:11.5px;margin-bottom:1px}
.kv .v{color:var(--txt);word-break:break-all}

/* 审批关卡步骤条 */
.steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:11px 13px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px}
.step{padding:5px 12px;border-radius:20px;font-size:12.5px;background:var(--gray-soft);color:var(--txt-2);border:1px solid var(--line)}
.step.done{background:var(--green-soft);color:var(--green);border-color:#bfe6d1}
.step.cur{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}
.step-arrow{color:var(--txt-3);font-size:12px}
.step em{font-style:normal;opacity:.75;font-size:11.5px}

/* 采购单执行进度条：每步下面带一行「谁办理」。
   四步（预付/发票/尾款/入库）统一走绿色系、保持小尺寸——它是「进度」不是「按钮」，
   不抢视线。真正要点的动作入口是下面那颗红色的「去办理」按钮。
   未办=白底绿字描边，已办=浅绿底绿字带 ✓，当前=绿实心白字。 */
.exec-steps{gap:7px}
.exec-steps .step{display:inline-flex;flex-direction:column;align-items:center;gap:1px;line-height:1.35;
  padding:5px 12px;border-radius:20px;font-size:12.5px;font-weight:400;
  background:#fff;color:var(--green);border:1px solid #bfe6d1}
.exec-steps .step.done{background:var(--green-soft);color:var(--green);border-color:#bfe6d1}
.exec-steps .step.done .sub{font-size:11px;opacity:.7}
.exec-steps .step.cur{background:var(--green);color:#fff;border-color:var(--green);font-weight:700;
  box-shadow:0 2px 8px rgba(26,156,91,.24)}
.exec-steps .step-arrow{color:#9ecfb6;font-size:12px;font-weight:600}
/* 已办步骤下面挂的自动生成单据号：能点开看单据与附件，所以做成看得出来的链接 */
.exec-steps .step-doc{color:var(--green);text-decoration:underline;text-underline-offset:2px;font-size:11px}
.exec-steps .step-doc:hover{opacity:.75}
.exec-steps .step .sub{font-size:11px;opacity:.75;font-weight:400}

/* 执行区的「去办理」按钮（登记预付款 / 提交发票 / 登记尾款 / 登记入库）：
   全页唯一保留红色的动作按钮——上面四个步骤胶囊已改绿色小尺寸，
   红色专门留给「此刻该点的那一颗」，一屏之内只有它是红的，视线自然落上来。
   尺寸也比普通按钮大一档，手指在手机上也好按。 */
.btn-exec{padding:10px 26px;font-size:14.5px;font-weight:600;
  background:var(--red);border:1px solid var(--red);color:#fff}
.btn-exec:hover{background:#b82424;border-color:#b82424}

/* 流转时间线 */
.timeline{position:relative;padding-left:18px}
.timeline:before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 13px 0}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-18px;top:5px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--brand)}
.tl-item.ok .tl-dot{background:var(--green);border-color:var(--green)}
.tl-item.bad .tl-dot{background:var(--red);border-color:var(--red)}
.tl-body{font-size:13px}
.tl-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.tl-head b{font-weight:600}
.tl-at{font-size:11.5px;color:var(--txt-3);white-space:nowrap}
.tl-sub{font-size:12px;color:var(--txt-2);margin-top:2px}

/* 待办卡 */
.pend-card{margin-bottom:14px}
.pend-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.pend-row:last-child{border-bottom:none}
.pend-row .pt{font-weight:600;flex:0 0 auto}
.pend-row .pn{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--txt-2);flex:0 0 auto}
.pend-row .sp{flex:1}
.pend-row .amt{font-variant-numeric:tabular-nums;color:var(--txt);font-weight:600}
/* 收款截图标记（2026-09-12）：李阳的放行待办带上提示"有没有证据可看"。
   刻意不用 pill —— 那一行已经有收款登记状态了，再加个胶囊在手机上会挤成一团。 */
.pend-row .shot-hint{font-size:11.5px;color:var(--txt-3);flex:0 0 auto}
.pend-row .shot-hint.none{color:var(--orange)}
/* 工作台任务弹窗里的状态下拉 */
.task-st{padding:5px 7px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-family:inherit;background:#fff;flex:0 0 auto}
.task-st:focus{outline:none;border-color:var(--brand)}

/* KPI 卡片 */
.kpi{padding:15px 17px}
.kpi-label{font-size:12px;color:var(--txt-3);margin-bottom:7px}
.kpi-value{font-size:24px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--txt)}
.kpi-value .unit{font-size:12px;font-weight:500;color:var(--txt-3);margin-left:3px}
.kpi .fhint{margin-top:9px;border-left-color:var(--line)}

/* 迷你列表（看板内最近流水） */
.mini-list{margin-top:4px}
.mini-row{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px dashed var(--line-2);font-size:12.5px}
.mini-row:last-child{border-bottom:none}
.mini-row .sp{flex:1;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* BOM 行编辑 / 凭证明细 */
.bom-parts{display:flex;flex-direction:column;gap:8px}
.entries{width:100%;border-collapse:collapse;font-size:12.5px}
.entries th{background:var(--panel-2);color:var(--txt-2);font-weight:600;text-align:left;padding:6px 9px;border-bottom:1px solid var(--line)}
.entries td{padding:6px 9px;border-bottom:1px solid var(--line-2)}
.entries tr:last-child td{border-bottom:none}

/* 可点击的统计卡（工作台：待审批 → 弹窗） */
.stat.clickable{cursor:pointer;transition:.15s;position:relative}
.stat.clickable:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(31,122,77,.10);transform:translateY(-1px)}
.stat.clickable:hover .k{color:var(--brand)}

/* ==================== 附件上传（采购合同等） ==================== */
.ref-holder{display:block}
.ref-holder select{width:100%}
.files{display:flex;flex-direction:column;gap:8px}
.file-list{display:flex;flex-direction:column;gap:6px}
.file-empty{font-size:12.5px;color:var(--txt-3);padding:6px 0}
.file-item{display:flex;align-items:center;gap:8px;font-size:13px;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px}
.file-item .fico{flex:0 0 auto;font-size:13px}
.file-item a{color:var(--brand);text-decoration:none;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item a:hover{text-decoration:underline}
.file-item .fsize{flex:0 0 auto;color:var(--txt-3);font-size:11.5px}
.file-del{flex:0 0 auto;border:none;background:transparent;color:var(--txt-3);
  font-size:16px;line-height:1;cursor:pointer;padding:0 4px;font-family:inherit}
.file-del:hover{color:var(--red)}
/* ⚠️ position:relative + overflow:hidden 是**手机端能弹文件框**的前提（2026-09-14）：
   里面的 <input class="file-input"> 是 absolute 铺满整块、opacity:0 盖在最上层 ——
   点哪都是点在 input 上，不再依赖「label 转发点击给隐藏 input」那套（手机浏览器不认，
   点了不弹框还不报错）。overflow:hidden 是防止铺满的 input 溢出盖到旁边控件。 */
.file-pick{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;position:relative;overflow:hidden;
  padding:6px 13px;border:1px dashed var(--brand);border-radius:8px;background:#fff;
  color:var(--brand);font-size:12.5px;cursor:pointer;transition:.15s}
.file-pick:hover{background:var(--brand-soft)}
.file-pick .file-input{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;
  cursor:pointer;font-size:0;margin:0;padding:0;border:none}
.file-tip{font-size:11.5px;color:var(--txt-3)}
.files-inline{display:flex;flex-wrap:wrap;gap:6px 14px}
.file-link{color:var(--brand);text-decoration:none;font-size:12.5px}
.file-link:hover{text-decoration:underline}
.file-link .fsize{color:var(--txt-3);font-size:11px}

/* 期初建账录入表格内的输入控件（表格里用，比 .field 更紧凑） */
.opl-input{width:100%;min-width:92px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;
  font-size:13px;font-family:inherit;background:#fff;box-sizing:border-box}
.opl-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.opl-input[readonly]{background:var(--bg-2,#f7f8fa);color:var(--txt-3)}
/* 期初录入表格按列定宽（.op-* 同时是 JS 取值的钩子，样式在这里统一给） */
.op-sku{min-width:150px}
.op-cat,.op-wh{min-width:104px}
.op-qty,.op-price,.op-amt{min-width:88px}
.op-amt{color:var(--txt-3)}
.op-del{padding:5px 10px}

/* 页面内输入弹层（替代原生 prompt）：层级高于普通弹窗，可从详情弹窗里再弹 */
.ask-layer{z-index:110}
.ask-box{max-width:430px}
/* 商品选择窗：盖在主弹层之上的独立一层。z-index 必须比 #modal(100) 和 #ask(110) 都高，
   否则会被压在下面点不着。 */
.pick-layer{z-index:120}
.pick-box{max-width:880px;max-height:88vh}
/* 面板住在这个弹窗里，就不必再套一层边框了，列表也能放得比内联时宽裕 */
.pick-box .goods-panel{margin-top:0;border:none;background:transparent;padding:0}
.pick-box .goods-panel-wrap{max-height:56vh}
.ask-field{margin-bottom:13px}
.ask-field:last-child{margin-bottom:0}
.ask-field>label{display:block;font-size:12.5px;color:var(--txt-3);margin-bottom:5px}
.ask-tip{font-size:12.5px;color:var(--txt-2);margin-bottom:12px;line-height:1.6;white-space:pre-line}
.ask-inp{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;color:var(--txt);box-sizing:border-box}
.ask-inp:focus{outline:none;border-color:var(--brand,#2f6fed)}
.ask-err{color:#c0392b;font-size:12.5px;margin-top:6px;min-height:16px}
/* 收款截图预览（2026-09-12 皓哥定）：李阳在「确认放行出库」的确认框里直接看图。
   手机截图是竖的，不压高度会把确认框撑到屏幕外，所以限高 260 并保持比例。 */
.ask-shot{margin:0 0 12px}
.ask-shot-h{font-size:12.5px;color:var(--txt-3);margin-bottom:6px}
.ask-shot-a{display:block;line-height:0;margin-bottom:8px}
.ask-shot-img{width:100%;max-height:260px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);cursor:zoom-in}
.ask-shot-file{font-size:13px;margin-bottom:6px}
.ask-shot-empty{font-size:12.5px;color:var(--txt-2);background:var(--orange-soft);border-left:3px solid var(--orange);border-radius:6px;padding:8px 10px;margin-bottom:12px;line-height:1.6}

/* ============================================================ AI 助手（2026-09-10 新增）
   配色刻意用紫色，跟平台原有的绿/蓝/红/橙区分开 ——
   一眼就能认出「这是 AI 弄的，不是系统算的」，方便人工复核。
   ============================================================ */
:root{ --ai:#6d4bd8; --ai-soft:#f2eefe; --ai-line:#ded4fb; }

.ai-spark{color:var(--ai);font-weight:700}
.ai-btn{border-color:var(--ai-line);color:var(--ai);background:#fff}
.ai-btn:hover{background:var(--ai-soft);border-color:var(--ai)}
.ai-btn:disabled{opacity:.6;cursor:default}
.ai-spin{display:inline-block;width:11px;height:11px;border:2px solid var(--ai-line);
  border-top-color:var(--ai);border-radius:50%;animation:ai-rot .7s linear infinite;vertical-align:-1px}
@keyframes ai-rot{to{transform:rotate(360deg)}}

.ai-note{background:var(--ai-soft);border:1px solid var(--ai-line);color:#40348c;
  border-radius:8px;padding:9px 12px;font-size:12.5px;line-height:1.75;margin:8px 0}
.ai-note.ai-warn{background:var(--orange-soft);border-color:#f2ddb8;color:#7a4a05}
.ai-note.ai-ok{background:var(--green-soft);border-color:#c4e6d3;color:#12603c}

/* AI 回填到表单里的字段：标蓝底，一眼看出哪些是机器填的、要人工核对 */
.ai-filled{background:var(--blue-soft) !important;border-color:#9dc0f5 !important}

.ai-preview{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:8px 0}
.ai-pv-row{display:flex;gap:10px;padding:6px 10px;font-size:12.5px;border-bottom:1px solid var(--line-2)}
.ai-pv-row:last-child{border-bottom:0}
.ai-pv-row:nth-child(odd){background:var(--panel-2)}
.ai-pv-k{flex:0 0 118px;color:var(--txt-2)}
.ai-pv-v{flex:1;word-break:break-all}

/* ---- 设置页配置卡 ---- */
.ai-card{border-color:var(--ai-line)}
.ai-sec{border-top:1px solid var(--line-2);padding:12px 0 4px;margin-top:6px}
.ai-sec:first-of-type{border-top:0}
.ai-sec-title{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ai-sec-sub{font-weight:400;color:var(--txt-3);font-size:12.5px}
.ai-mini{margin-left:auto;font-size:12.5px;color:var(--txt-2);font-weight:400;display:flex;align-items:center;gap:5px;cursor:pointer}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.ai-hint{font-size:11.5px;color:var(--txt-3);margin-top:3px;line-height:1.6}
.ai-switch{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--txt-2);
  padding:6px 0;cursor:pointer;line-height:1.65}
.ai-switch input{margin-top:3px;flex:0 0 auto}
.ai-switch b{color:var(--txt)}
.ai-usage-item{display:flex;gap:10px;font-size:12.5px;padding:3px 0}
.ai-usage-k{flex:0 0 72px;color:var(--txt-2)}
.ai-usage-v{flex:1;color:var(--txt)}
.ai-disclaim{font-size:11.5px;color:var(--txt-3);border-top:1px solid var(--line-2);
  margin-top:10px;padding-top:9px;line-height:1.7}
.ai-test-row{display:flex;gap:9px;align-items:baseline;font-size:12.5px;padding:5px 2px;border-bottom:1px solid var(--line-2)}
.ai-test-row:last-child{border-bottom:0}
.ai-test-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--txt-3);position:relative;top:-1px}
.ai-test-row.ok .ai-test-dot{background:var(--green)}
.ai-test-row.bad .ai-test-dot{background:var(--red)}
.ai-test-row b{flex:0 0 168px}
.ai-test-msg{flex:1;color:var(--txt-2);word-break:break-all}
.ai-test-row.bad .ai-test-msg{color:var(--red)}

/* ---- 简报卡 ---- */
.ai-brief-head{font-size:15px;font-weight:600;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ai-brief-date{font-size:11.5px;font-weight:400;color:var(--txt-3)}
.ai-brief-sum{font-size:13px;color:var(--txt);margin:7px 0 4px;line-height:1.8}
.ai-brief-sub{font-size:12.5px;font-weight:600;color:var(--txt-2);margin:9px 0 3px}
.ai-brief-warn{color:var(--orange)}
.ai-brief-ok{color:var(--green)}
.ai-brief-ul{margin:0 0 0 18px;font-size:12.5px;color:var(--txt-2);line-height:1.85}
.ai-brief-ul li{margin-bottom:2px}
.ai-li-warn{color:var(--orange)}
.ai-brief-facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--txt-2);
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;padding:8px 12px;margin-top:9px}
.ai-brief-facts b{color:var(--txt)}
.ai-up{color:var(--red)}
.ai-down{color:var(--green)}

/* ---- 库存建议标签 ---- */
.ai-tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:20px;border:1px solid transparent}
.ai-tag-urgent{background:var(--red-soft);color:var(--red);border-color:#f3c9c9}
.ai-tag-soon{background:var(--orange-soft);color:var(--orange);border-color:#f2ddb8}
.ai-tag-low{background:#fff8e1;color:#8a6d00;border-color:#eadfae}
.ai-tag-ok{background:var(--green-soft);color:var(--green);border-color:#c4e6d3}

@media (max-width:820px){
  .ai-grid{grid-template-columns:1fr}
  .ai-test-row b{flex:0 0 110px}
}

/* 表单顶部的 AI 工具条（智能填报 / 发票识别 / 比价） */
.ai-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  background:var(--ai-soft);border:1px solid var(--ai-line);border-radius:8px;
  padding:8px 11px;margin-bottom:12px}
.ai-bar-tip{font-size:11.5px;color:#5b4b9e}

/* 表单内嵌的 AI 面板（智能填充 / 发票识别）
   为什么要内嵌而不是弹层：平台只有一个 #modal，新建单据的表单本身就渲染在
   #modal-body 里，再叠一层弹层会把表单整个覆盖掉，回填就落空了。 */
.ai-fill-panel,.ai-inv-panel{
  background:var(--ai-soft);border:1px solid var(--ai-line);border-radius:9px;
  padding:12px 13px;margin-bottom:12px}
.ai-fill-panel textarea{width:100%;font-family:inherit}
.ai-fill-foot{display:flex;gap:9px;align-items:center;margin-top:9px}
.ai-fill-panel .ai-note,.ai-inv-panel .ai-note{background:transparent;border:0;padding:0 0 8px}
.ai-fill-panel .ai-note.ai-warn,.ai-inv-panel .ai-note.ai-warn{
  background:var(--orange-soft);border:1px solid #f2ddb8;padding:8px 10px}
.ai-inv-panel input[type=file]{font-size:12.5px}

/* ---- AI 助手页（能力地图，2026-09-11）
   目的：员工登录后能一眼看到「AI 在哪、能帮我干什么」。
   配色沿用 AI 紫色系（--ai / --ai-line / --ai-soft），让"这是 AI 的东西"保持统一识别度。 */
.ai-help-hero{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(135deg,#f5f3ff,#eef5ff);border:1px solid var(--ai-line);
  border-radius:12px;padding:16px 18px;margin-bottom:14px}
.ai-help-title{font-size:17px;font-weight:700;color:var(--ai);display:flex;align-items:center;gap:7px}
.ai-help-sub{font-size:12.5px;color:var(--txt-2);line-height:1.75;margin-top:5px;max-width:660px}
.ai-help-sub b{color:var(--txt)}
.ai-help-state{display:flex;flex-direction:column;gap:3px;border-radius:9px;padding:10px 14px;
  font-size:12.5px;min-width:196px;max-width:280px}
.ai-help-state b{font-size:13px}
.ai-help-state span{line-height:1.6;opacity:.9}
.ai-help-state.ok{background:var(--green-soft);border:1px solid #c4e6d3;color:#12603c}
.ai-help-state.warn{background:var(--orange-soft);border:1px solid #f2ddb8;color:#7a4a05}

.ai-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ai-help-card{border:1px solid var(--ai-line);border-radius:10px;padding:13px 14px;background:#fff;
  display:flex;flex-direction:column;gap:8px}
/* 别人的那几项：淡一点、灰边框，不跟自己的抢注意力 */
.ai-help-card.other{border-color:var(--line);background:var(--panel-2)}
.ai-help-card.off{opacity:.62}
.ai-help-h{display:flex;align-items:center;gap:9px}
.ai-help-h b{font-size:14px}
.ai-help-what{font-size:12.5px;color:var(--txt-2);line-height:1.75}
.ai-help-where{font-size:12.5px;color:var(--txt);line-height:1.7;
  background:var(--panel-2);border-radius:7px;padding:7px 10px}
.ai-help-card.other .ai-help-where{background:#fff}
.ai-help-where-k{display:inline-block;color:var(--ai);font-weight:600;margin-right:7px}
.ai-help-f{display:flex;align-items:center;gap:10px;margin-top:auto;flex-wrap:wrap}
.ai-help-who{font-size:11.5px;color:var(--txt-3)}

/* 三条规矩 */
.ai-help-rules .ai-rule-row{display:flex;gap:11px;font-size:12.5px;color:var(--txt-2);
  line-height:1.8;padding:9px 0;border-bottom:1px solid var(--line-2)}
.ai-help-rules .ai-rule-row:last-of-type{border-bottom:0}
.ai-help-rules .ai-rule-row b{color:var(--txt)}
.ai-rule-no{flex:0 0 20px;height:20px;border-radius:50%;background:var(--ai-soft);color:var(--ai);
  border:1px solid var(--ai-line);font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.ai-help-foot{margin-top:10px;font-size:12px;color:var(--txt-3);background:var(--panel-2);
  border-radius:8px;padding:9px 12px;line-height:1.75}

/* 商品管理（2026-09-11）：技术参数一行一条，限制宽度别把表格撑爆 */
.goods-params{max-width:230px}
.goods-params .sub{margin:0}
/* 商品管理：已停用的商品（型号锁定后「换型号＝新建+停用旧的」） */
.row-off td{color:var(--txt-3)}
.row-off .mono{color:var(--txt-3)}
.tag-off{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;font-size:11px;
  background:var(--gray-soft);color:var(--txt-3);border:1px solid var(--line);white-space:nowrap}

/* ===== 采购计划 / 采购单：选商品、选供应商（2026-09-11 皓哥定） ===== */
/* 商品选择：显示名称的只读框 + 右侧按钮，看着就是"点这里去挑" */
.goods-pick{display:flex;gap:6px;align-items:stretch}
.goods-pick input{flex:1 1 auto;cursor:pointer;background:var(--panel);color:var(--txt)}
.goods-pick .btn{flex:0 0 auto;white-space:nowrap}
.goods-pick input:hover{border-color:var(--ai-line)}
/* 商品选择面板（2026-09-11 皓哥定：改住进独立的 #pick 弹窗，选完自动关） */
.goods-panel{margin-top:8px;border:1px solid var(--ai-line);border-radius:10px;background:var(--ai-soft);padding:10px}
.goods-panel-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
/* 搜索框独占一行，类别/只看采购过的/关闭 排第二行 —— 挤在一行时会被压成好几段 */
.goods-panel-head input[type=text]{flex:1 1 100%;min-width:140px}
.goods-panel-head select{flex:0 0 auto}
.goods-bought{flex:0 0 auto;display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--txt-2);cursor:pointer}
.goods-bought input{margin:0}
.goods-panel-wrap{max-height:300px;overflow:auto;background:var(--panel);border-radius:8px}
.goods-panel-wrap table{font-size:12.5px}
/* 型号/名称这类短字段不许换行（否则 A-NYH-001 会被折成四行）；规格太长就让它自己缩 */
.goods-panel-wrap th,.goods-panel-wrap td{white-space:nowrap;padding:7px 9px}
.goods-panel-wrap td:nth-child(3){white-space:normal;max-width:180px}
.goods-row{cursor:pointer}
.goods-row:hover td{background:var(--ai-soft)}
.goods-row-dead{cursor:not-allowed}
.goods-row-dead:hover td{background:transparent}
/* 供应商选择：下拉 + 新建按钮；新建走内联小表单 */
.seller-pick{display:flex;gap:6px;align-items:stretch}
.seller-pick select{flex:1 1 auto}
.seller-pick .btn{flex:0 0 auto;white-space:nowrap}
.seller-new-inner{margin-top:8px;border:1px solid var(--ai-line);border-radius:10px;background:var(--ai-soft);padding:11px 12px}
.seller-new-title{font-size:12.5px;font-weight:600;color:var(--txt-2);margin-bottom:9px}
/* 采购单「历史采购返单」快捷条 */
.quick-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.quick-bar .sub{font-size:12px}
/* BOM：成品/配件都只能从商品管理里选（2026-09-11 皓哥定），
   选择窗复用 #pick 弹层，这里不用再单开样式 */
/* AI 建议采购量的数字格子 */
.pr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:9px 0}
.pr-cell{background:var(--panel-2);border-radius:8px;padding:8px 10px;text-align:center}
.pr-cell b{display:block;font-size:16px;color:var(--txt);line-height:1.5}
.pr-cell span{font-size:11.5px;color:var(--txt-3)}
.ai-comment{margin-top:8px;padding:9px 12px;border-radius:8px;background:var(--panel-2);
  font-size:12.5px;line-height:1.85;color:var(--txt-2)}
@media (max-width:820px){
  .ai-help-grid{grid-template-columns:1fr}
  .ai-help-hero{padding:13px 14px;gap:12px}
  .ai-help-state{max-width:none;width:100%}
  .pr-grid{grid-template-columns:repeat(2,1fr)}
}

/* 记账凭证页的公司切换（不复用 .tab：页签计数断言靠 .tab，不能被这里污染） */
.vco-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0 10px}
.vco{padding:6px 13px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:12.5px;
  color:var(--txt-2);cursor:pointer;transition:.15s;white-space:nowrap}
.vco:hover{background:var(--gray-soft);color:var(--txt)}
.vco.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:600}
.vco-bar .btn{margin-left:auto}
/* ---------------- 记账凭证版式（2026-09-11 按《小企业会计准则》重做） ----------------
   弹层里看的是「跟随界面主题」的这一版；打印走 finance.js 的 VOUCHER_PRINT_CSS（A4 纯黑白）。
   两处 class 名保持一致，版式才不会走样 —— 改一处记得同步另一处。 */
.vch{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--panel)}
.vch-co{font-size:14.5px;font-weight:600;text-align:center;color:var(--txt)}
.vch-title{font-size:16px;font-weight:700;text-align:center;letter-spacing:6px;margin:6px 0 4px}
.vch-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--txt-2);margin:8px 0}
.vch-tb{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.vch-tb th,.vch-tb td{border:1px solid var(--line);padding:5px 7px;vertical-align:top;word-break:break-all}
.vch-tb th{background:var(--gray-soft);font-weight:600;text-align:center}
.vch-tb tfoot td{background:var(--panel-2);font-weight:600}
.vch-sum{color:var(--txt-2)}
.vch-amt{text-align:right;font-variant-numeric:tabular-nums}
.vch-upper{font-size:12.5px;margin:9px 0;color:var(--txt)}
.vch-sign{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;
  margin-top:12px;color:var(--txt-2)}
.vch-src{font-size:11.5px;color:var(--txt-3);margin-top:10px}
/* 凭证抬头可改区（附单据张数 + 四签章栏） */
.vch-edit{margin-top:12px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel-2);display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.vch-edit label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--txt-2)}
.vch-edit input{font-family:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:var(--txt)}
/* 凭证关联附件（2026-09-12 第 7 批，皓哥定）
   一张附件 = 附件页上的一页；附件页规格跟随凭证纸张，合同恒 A4（所以那一行挂 A4 标签）。
   行内复用. file-item / .file-pick / .file-del / .fsize —— 跟单据附件字段长一个样，
   员工在采购单里学会的那套操作，在凭证里不用重学。 */
.vatt{margin-top:12px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.vatt-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.vatt-head b{font-size:13px}
.vatt-head .sub{font-size:11.5px;color:var(--txt-3);line-height:1.7}
.vatt-k{font-family:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:var(--txt);flex:0 0 auto}
.vatt-no{flex:0 0 auto;width:18px;text-align:right;font-size:11.5px;color:var(--txt-3);
  font-variant-numeric:tabular-nums}
.vatt-tag{flex:0 0 auto;font-size:11px;padding:2px 6px;border-radius:6px;
  background:var(--brand-soft);color:var(--brand)}
.vatt-tag.warn{background:var(--orange-soft);color:var(--orange)}
.vatt-src{flex:0 0 auto;font-size:11px;padding:2px 6px;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);color:var(--txt-3);cursor:help}
/* 附件页序调整（2026-09-12 第 7 批补，皓哥定「上下箭头」）
   序号=附件页页码，箭头挪的就是打出来那一叠纸的顺序。
   放在行尾动作区（和"单独打印""摘掉"归一处），不挤在序号旁边 ——
   序号列只有 18px 宽，塞两个按钮会把文件名挤没。 */
.vatt-mv{flex:0 0 auto;display:inline-flex;gap:3px}
.vatt-mvb{flex:0 0 auto;width:20px;height:20px;padding:0;border:1px solid var(--line);
  border-radius:6px;background:#fff;color:var(--txt-2);cursor:pointer;
  font-family:inherit;font-size:11px;line-height:1}
.vatt-mvb:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.vatt-mvb:disabled{opacity:.35;cursor:default}
.vatt-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:9px}
.vatt-note{margin-top:9px;font-size:11.5px;color:var(--txt-3);line-height:1.8}
/* 可折叠卡片（2026-09-12 第 7 批）：系统设置里的操作日志用。
   日志是"排查问题时才翻"的东西，平时不该占一整屏 —— 皓哥定折叠起来。
   用原生 <details>：零 JS、手机上也点得动，不依赖任何自定义交互。
   ⚠️ summary 上挂着 .card-head（display:flex + space-between），所以
      "展开/收起"用 ::after 伪元素当第二项即可；必须干掉浏览器默认的三角标记，
      否则左边会多出一个和卡片头不对齐的小箭头。 */
.fold>summary{margin-bottom:0;cursor:pointer;list-style:none;user-select:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:'展开';font-size:12px;color:var(--txt-3);flex:0 0 auto}
.fold[open]>summary::after{content:'收起'}
.fold>summary:hover::after{color:var(--brand)}
.fold-body{margin-top:13px}
@media (max-width:820px){
  .vch{padding:11px 12px}
  .vch-title{letter-spacing:3px}
  .vch-edit{grid-template-columns:1fr}
}

/* ---------------- 银行 / 现金日记账 · 三栏式账页（2026-09-11 第 3 批） ----------------
   按《小企业会计准则》的账簿读法排版：承前页 → 逐笔 → 本月合计 → 过次页。
   数字列必须等宽（tabular-nums），否则一列金额上下对不齐，对账时看着费劲。 */
.bk-tb{width:100%;border-collapse:collapse;font-size:12.5px}
.bk-tb th,.bk-tb td{border-bottom:1px solid var(--line);padding:6px 8px;vertical-align:middle;word-break:break-all}
.bk-tb th{background:var(--gray-soft);font-weight:600;text-align:left;font-size:12px;color:var(--txt-2)}
.bk-tb th.num{text-align:right}
.bk-tb td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:Consolas,Menlo,monospace}
/* 承前页 / 过次页：账页的首尾两条结转，加底色强调"这不是一笔业务" */
.bk-tb tr.bk-carry td{background:var(--panel-2);font-weight:600;color:var(--txt-2)}
.bk-tb tr.bk-sum td{background:var(--blue-soft);font-weight:600}
.bk-tb tr:hover td{background:var(--panel-2)}
.bk-tb tr.bk-carry:hover td,.bk-tb tr.bk-sum:hover td{background:var(--panel-2)}
.bk-tb tr.bk-sum:hover td{background:var(--blue-soft)}
.bk-bal{white-space:nowrap}
.bk-dir{margin-left:5px;font-size:10.5px;color:var(--txt-3);font-family:inherit}
.bk-novno{color:var(--txt-3);font-size:11.5px}
.bk-vno{color:var(--blue)}
.bk-act{white-space:nowrap}
.bk-period{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 2px 3px;font-size:12.5px;
  color:var(--txt-2)}
.bk-period input{font-family:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:var(--txt)}
@media (max-width:820px){
  .bk-tb th,.bk-tb td{padding:5px 6px;font-size:11.5px}
  .bk-period{font-size:12px}
}

/* ---------------- 财务模块的公司切换（2026-09-11 第 4 批） ----------------
   两个公司共用一套平台、账本各自独立，所以财务每个页签都要能指定"看哪一家"。
   切换器放在页签栏右侧，只在有两家及以上公司时出现（没得选就别占地方）。 */
.fin-hd{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:space-between}
.fin-hd .tabs{flex:1 1 300px;margin-bottom:14px}
.fin-co{display:flex;align-items:center;gap:7px;padding-top:4px;white-space:nowrap;flex:0 0 auto}
.fin-co label{font-size:12.5px;color:var(--txt-2)}
.fin-co select{font-family:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--txt);max-width:200px}
.fin-co select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.fin-co-tip{font-size:11.5px;color:var(--txt-3)}
/* 标题旁边标一下"这是哪家公司的数"，免得看半天不知道在算谁的钱 */
.fin-co-pill{display:inline-block;margin-left:7px;padding:1px 8px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);font-size:11.5px;font-weight:600;vertical-align:middle}

/* ---------------- 账务体检报告（2026-09-11 第 4 批） ----------------
   体检是**报告**不是修账工具：只报不改。所以样式重点在
   "哪条过了、哪条没过、没过怎么修"一眼能扫出来。 */
.aud-head{padding:10px 14px;border-radius:10px;font-size:14px;font-weight:600;margin-bottom:12px;line-height:1.6}
.aud-ok{background:var(--green-soft);color:#14603c;border:1px solid #c4e6d3}
.aud-warn{background:var(--orange-soft);color:#7a4a05;border:1px solid #f2ddb8}
.aud-bad{background:var(--red-soft);color:#8f1d1d;border:1px solid #f7c6c6}
.aud-list-wrap{max-height:46vh;overflow:auto;padding-right:2px}
.aud-item{padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff}
.aud-item.aud-pass{border-color:#cde8db;background:#fbfefc}
.aud-item.aud-warn{border-color:#f2ddb8;background:#fffdf7}
.aud-item.aud-error{border-color:#f7c6c6;background:#fffbfb}
.aud-t{font-size:13.5px;font-weight:600;color:var(--txt);line-height:1.5}
.aud-n{float:right;font-size:12px;color:var(--red);font-weight:600}
.aud-n-ok{color:var(--green)}
.aud-d{font-size:12.5px;color:var(--txt-2);margin-top:4px;line-height:1.65}
.aud-s{font-size:12.5px;color:var(--txt);margin-top:7px;background:var(--gray-soft);
  padding:7px 10px;border-radius:7px;line-height:1.65}
.aud-list{margin:7px 0 0;padding-left:18px;font-size:12px;color:var(--txt-2);line-height:1.9}
.aud-list li{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (max-width:820px){
  .fin-hd .tabs{flex:1 1 100%}
  .fin-co{padding-top:0;padding-bottom:10px}
  .aud-list-wrap{max-height:none}
}

/* ============================================================ AI 文字对话框（第 16 批）
   两个入口共用样式：AI 助手页内嵌（.ai-chat-card 里）+ 右下角浮窗（#ai-pop 里）。
   浅色主题，跟平台其余页面一致 —— 别在这儿写死深色（大屏那套是特例，见上面那段注释）。 */
.ai-chat-card .ai-chat{height:520px}
.ai-chat{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);overflow:hidden;min-height:0}
.ai-chat-list{flex:1;overflow-y:auto;padding:14px;background:var(--panel-2);min-height:0}
.ai-chat-hi{color:var(--txt-2);font-size:13.5px;line-height:1.8;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:12px 14px}
.ai-chat-hi-2{display:block;margin-top:6px;color:var(--txt-3);font-size:12.5px}
.ai-m{display:flex;gap:8px;margin-bottom:12px;align-items:flex-start}
.ai-m-u{justify-content:flex-end}
.ai-m-who{flex:0 0 22px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);font-size:12px;margin-top:2px}
.ai-m-b{max-width:86%;padding:9px 12px;border-radius:10px;font-size:13.5px;line-height:1.75;
  white-space:normal;word-break:break-word}
.ai-m-u .ai-m-b{background:var(--blue);color:#fff;border-bottom-right-radius:3px}
.ai-m-a .ai-m-b{background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:3px}
.ai-m-err .ai-m-b{background:var(--red-soft);border-color:#f5c9c9;color:var(--red)}
/* "正在查数据…"那条占位。单独标一个类是给测试用的：它也是 .ai-m-a 气泡，
   不区分的话自动化会把占位文字当成回答（假绿）。顺手把它做得比正文淡一点。 */
.ai-m-wait .ai-m-b{color:var(--txt-3);font-style:normal}
.ai-m-wait .ai-m-who{opacity:.55}
.ai-m-t{margin-top:7px;padding-top:6px;border-top:1px dashed var(--line-2);font-size:12px;color:var(--txt-3)}
.ai-chat-egs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;border-top:1px solid var(--line-2);background:var(--panel)}
.ai-chat-eg-h{font-size:12px;color:var(--txt-3)}
.ai-chat-eg{border:1px solid var(--line);background:var(--panel);color:var(--txt-2);cursor:pointer;
  font-size:12px;padding:3px 9px;border-radius:20px;font-family:inherit}
.ai-chat-eg:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.ai-chat-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line-2);background:var(--panel);align-items:flex-end}
.ai-chat-in{flex:1;resize:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font-family:inherit;font-size:13.5px;line-height:1.6;color:var(--txt);outline:none}
.ai-chat-in:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.ai-chat-send{flex:0 0 auto;height:36px}
.ai-chat-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:6px 12px 10px;background:var(--panel)}
.ai-chat-tip{font-size:11.5px;color:var(--txt-3);line-height:1.5}

/* 右下角浮窗。fixed 定位 —— #app 上没有 transform，所以直接贴视口，不会被裁掉。 */
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:6px;
  background:var(--brand);color:#fff;border:none;border-radius:24px;padding:10px 16px;cursor:pointer;
  font-family:inherit;font-size:13.5px;box-shadow:0 6px 18px rgba(31,122,77,.35)}
.ai-fab:hover{background:var(--brand-2)}
.ai-fab span{font-size:13px}
.ai-pop{position:fixed;right:22px;bottom:78px;z-index:61;width:392px;max-width:calc(100vw - 24px);
  height:560px;max-height:calc(100vh - 120px);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 12px 40px rgba(16,32,48,.18);display:flex;flex-direction:column;overflow:hidden}
.ai-pop-head{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line-2);background:var(--panel-2)}
.ai-pop-head b{font-size:14px}
.ai-pop-sub{flex:1;font-size:11.5px;color:var(--txt-3)}
.ai-pop .ai-chat{flex:1;border:none;border-radius:0;min-height:0}
/* 窄屏（手机）：浮窗改成铺满，不然 392px 宽在小屏上左右都是缝，还挡着看不全 */
@media (max-width:560px){
  .ai-pop{right:8px;left:8px;width:auto;bottom:74px;height:auto;max-height:calc(100vh - 96px)}
  .ai-chat-card .ai-chat{height:440px}
  .ai-m-b{max-width:92%}
}

/* ================================================================
   合同明细行 + 生成合同（2026-09-13 第 18 批）
   主题跟着界面走（浅色）。⚠️ 打印版式**不在这里** ——
   它由 public/scm.js 的 ctPrintHtml 自带一份纯黑白样式：
   打到纸上的东西不能跟界面主题联动（深色主题下打出一张黑底合同是要命的）。
   ================================================================ */
.lines-field{display:flex;flex-direction:column;gap:8px}
.lines-field .table-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:auto;max-height:340px}
.lines-table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:520px}
.lines-table th{background:var(--gray-soft);font-size:12px;font-weight:700;color:var(--txt-2);padding:6px;text-align:left;white-space:nowrap;position:sticky;top:0;z-index:1}
.lines-table td{padding:3px 4px;border-top:1px solid var(--line-2)}
.lines-table input{width:100%;border:1px solid transparent;background:transparent;padding:4px 5px;border-radius:6px;font:inherit;color:var(--txt)}
.lines-table input:hover{border-color:var(--line)}
.lines-table input:focus{border-color:var(--brand);background:#fff;outline:none}
.lines-table .num input{text-align:right}
.lines-table .lp-op{white-space:nowrap;text-align:right}
.lines-table .lp-op .btn{padding:2px 6px;font-size:11.5px}
.lines-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lines-sum{font-size:12px;color:var(--txt-2);margin-left:auto}

.ct-ops{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.ct-ops .sub{font-size:11.5px;color:var(--txt-3)}
.ct-sum{margin:10px 0 6px;font-size:12.5px;color:var(--txt-2);background:var(--blue-soft);border-radius:8px;padding:7px 10px}
.ct-sum .ct-ok{color:var(--green)}
.ct-sum .ct-warn{color:var(--orange)}
.ct-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:10px}
.ct-fields .field{margin:0}
.ct-fields .field label{font-size:12.5px;font-weight:700;color:var(--txt-2);display:block;margin-bottom:3px}
.ct-fields .field input{width:100%}
.ct-lines{margin-top:14px}
.ct-lines-h{display:block;font-size:12.5px;font-weight:700;color:var(--txt-2);margin-bottom:6px}
.ct-auto{font-size:10.5px;font-weight:400;color:var(--green);background:var(--green-soft);border-radius:4px;padding:1px 5px;margin-left:4px}
.ct-miss{margin:8px 0;padding:8px 10px;background:var(--orange-soft);border-left:3px solid var(--orange);border-radius:6px;font-size:12.5px;color:var(--txt)}
.ct-miss .sub{color:var(--txt-2);margin-top:3px;font-size:11.5px}
.ct-pick-list{border:1px solid var(--line);border-radius:var(--radius);overflow-y:auto;margin-top:8px;max-height:52vh}
.ct-pick-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line-2);font-size:12.5px}
.ct-pick-row:last-child{border-bottom:0}
.ct-pick-row .pn{color:var(--txt-2);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-pick-row .amt{color:var(--txt-2);flex:0 0 auto}
.modal-body code, .hint code{background:var(--gray-soft);border-radius:4px;padding:1px 4px;font-size:11.5px}