/* ===========================================================
   速达非 · 摩洛哥综合管理系统 — 样式表
   Speedaf Morocco — Integrated Management System
   设计语言：琥珀刻度 / Amber Scale
   -----------------------------------------------------------
   · 本文件只改「表现层」。数据库、字段、RLS 权限、业务规则、
     审批链、模块 id 与顺序全部保持原样，类名契约完全继承上一版。
   · 新增的能力（侧栏收成图标条 / 密度切换 / 骨架屏）都是纯样式，
     由外层容器加一个类名即可启用，不改任何 JS 逻辑。
   =========================================================== */

:root {
  /* ============================================================
     琥珀刻度 · Amber Scale —— 设计令牌
     速达非 · 摩洛哥综合管理系统
     ------------------------------------------------------------
     原则一「秩序优先」栅格与刻度稳定，间距一律 4px 基数递进，
                      同类元素的位置在任何页面都可预期。
     原则二「橙为点睛」橙色只给需要被看见的东西：主操作、当前所在、
                      关键数据。其余全部交给中性色，长时间看数据不累。
     原则三「数据先行」数字是一等公民，一律等宽对齐、独立字重。
     ============================================================ */

  /* ---- 品牌橙：与公司 Logo 完全同色（#EF7F17）----
     色阶只向下加深用于小号文字达标，不向上提亮，避免出现暗块 / 棕色 */
  --brand-50:  #FFF7ED;
  --brand-100: #FFEDD5;
  --brand-200: #FDD8A8;
  --brand-300: #FBBE72;
  --brand-400: #F79E3F;
  --brand:     #EF7F17;   /* 品牌原色：图形 / 图标 / 进度 / 激活指示 */
  --brand-500: #EF7F17;
  --brand-600: #DB6E0C;   /* hover */
  --brand-700: #B4560A;   /* 白底橙色文字 4.91:1 —— 达 WCAG AA */
  --brand-800: #93460A;
  --brand-900: #783907;

  /* ---- 中性：干净冷灰（不用暖棕灰，否则整套界面发浊发旧）---- */
  --ink:    #1D2228;      /* 主文字    白底 15.6:1 */
  --ink-2:  #4A525A;      /* 次文字    白底  8.6:1 */
  --muted:  #5F6975;      /* 辅助文字  白底  5.4:1 —— 达 WCAG AA */
  --faint:  #6E7780;      /* 次级辅助  白底  4.55:1 —— 不再低于 AA */
  --line:   #E5E9EE;      /* 分隔线 */
  --line-2: #F1F4F7;      /* 浅分隔 / 浅填充 */
  --bg:     #F4F6F9;      /* 页面底色 */
  --bg-2:   var(--bg-2);      /* 更浅的填充 */
  --card:   #FFFFFF;

  /* ---- 语义色 ---- */
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --ok:        #0E7A50;  --ok-bg:     #E6F5EE;
  --warn:      #8A5A05;  --warn-bg:   #FCF2DE;
  --danger:    #C0392C;  --danger-bg: #FCEDEB;
  --info:      #1A5FB4;  --info-bg:   #EBF2FC;
  --gray:      #5D6673;  --gray-bg:   #EEF1F5;
  --accent:    #EF7F17;

  /* ---- 圆角：一套连续刻度，不随手写数值 ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;

  /* ---- 阴影：分层、克制。中性灰打底，另备一层品牌橙柔光给主按钮 ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 2px 6px -1px rgba(16, 24, 40, 0.06), 0 8px 20px -6px rgba(16, 24, 40, 0.12);
  --shadow:    0 1px 2px rgba(16, 24, 40, 0.04), 0 3px 10px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 4px 12px -4px rgba(16, 24, 40, 0.08), 0 18px 46px -12px rgba(16, 24, 40, 0.20);
  --shadow-xl: 0 6px 16px -6px rgba(16, 24, 40, 0.10), 0 28px 70px -16px rgba(16, 24, 40, 0.26);
  --glow:      0 1px 2px rgba(180, 86, 10, 0.18), 0 4px 14px -3px rgba(239, 127, 23, 0.34);

  /* ---- 动效：短、快、指数缓出。不做回弹 / 弹性 ---- */
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  120ms;
  --t:       180ms;
  --t-slow:  260ms;

  /* ---- 布局刻度 ---- */
  --sidebar-w: 246px;
  --rail-w: 68px;
  --topbar-h: 64px;
  --focus: 0 0 0 3px rgba(219, 110, 12, 0.28);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size:var(--fs-5);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.hidden { display: none !important; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-800); }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.015em; }

/* ---- 选中色：品牌浅橙，替代系统默认蓝 ---- */
::selection { background: var(--brand-100); color: var(--brand-900); }

/* ---- 键盘焦点：只在键盘操作时出现，鼠标点击不打扰 ----
   这一条同时满足无障碍要求（可聚焦元素必须有可见焦点指示） */
:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 4px;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }

/* ---- 滚动条：更细、更安静，hover 才加深 ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #D3D9E0; border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #B9C2CC; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- 尊重「减少动态效果」偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------- Boot ---------------- */
.boot {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  background: var(--bg); z-index: 900;
}
.boot-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.boot-logo img { height: 34px; display: block; }
.spinner {
  width: 30px; height: 30px; border: 3px solid var(--brand-100);
  border-top-color: var(--brand); border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot-text { color: var(--muted); font-size:var(--fs-4); }

/* ---------------- Auth ---------------- */
.auth-wrap { position: fixed; inset: 0; display: flex; background: var(--card); z-index: 800; }
.auth-brand {
  flex: 1 1 46%; min-width: 380px; position: relative; overflow: hidden;
  background: linear-gradient(152deg, #E9740F 0%, #EF7F17 48%, #F2902C 100%);
  color: #fff; padding: 56px 54px; display: flex; flex-direction: column; justify-content: space-between;
}
/* 刻度网格：把「秩序」直接画在品牌面板上，替代千篇一律的大圆形光斑 */
.auth-brand::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 95% at 82% 8%, #000 0%, transparent 72%);
  mask-image: radial-gradient(130% 95% at 82% 8%, #000 0%, transparent 72%);
}
.auth-brand::after {
  content: ""; position: absolute; right: -220px; bottom: -270px;
  width: 660px; height: 660px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 66%);
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-logo { display: flex; align-items: center; gap: 12px; font-size:var(--fs-8); font-weight: 800; letter-spacing: -0.025em; }
.auth-logo img.lm { width: 38px; height: 38px; border-radius: 11px; display: block; box-shadow: 0 2px 10px rgba(120, 52, 0, 0.22); }
.auth-hero h2 { font-size:var(--fs-9); line-height: 1.26; margin: 0 0 16px; font-weight: 800; letter-spacing: -0.03em; }
.auth-hero p { font-size:var(--fs-5); line-height: 1.8; color: rgba(255, 255, 255, 0.92); max-width: 440px; margin: 0; }
.auth-feats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.auth-feats span {
  font-size:var(--fs-3); padding: 6px 13px; border-radius: var(--r-full); font-weight: 550;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.auth-foot { font-size:var(--fs-3); color: rgba(255, 255, 255, 0.66); }

.auth-panel { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 40px 28px; overflow-y: auto; background: var(--card); }
.auth-box { width: 100%; max-width: 392px; }
.auth-box h3 { font-size:var(--fs-9); margin-bottom: 6px; }
.auth-sub { color: var(--muted); font-size:var(--fs-5); margin-bottom: 24px; }
.auth-tabs { display: flex; gap: 4px; background: var(--line-2); padding: 4px; border-radius: 9px; margin-bottom: 22px; }
.auth-tabs button {
  flex: 1; border: 0; background: transparent; padding: 8px 4px; border-radius: 6px;
  font-size:var(--fs-5); font-weight: 600; color: var(--ink-2); cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.auth-tabs button:hover { color: var(--brand-700); }
.auth-tabs button.active { background: #fff; color: var(--brand-700); box-shadow: var(--shadow-sm); }
.auth-alt { text-align: center; margin-top: 18px; font-size:var(--fs-4); color: var(--muted); }
.auth-alt button {
  border: 0; background: none; color: var(--brand-700); font-weight: 600;
  cursor: pointer; font-family: inherit; font-size:var(--fs-4); padding: 0 2px;
}
.code-row { display: flex; gap: 8px; }
.code-row .input { flex: 1; }
.code-row .btn { white-space: nowrap; }
.notice {
  font-size:var(--fs-3); padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
  margin-bottom: 16px; line-height: 1.6;
}
.notice.warn { background: var(--warn-bg); color: #8a5300; border-color: #ffe1ab; }
.notice.error { background: var(--danger-bg); color: #a52a2a; border-color: #f7c9c9; }
.notice.ok { background: var(--ok-bg); color: #0a6e3d; border-color: #bfe8d0; }

/* ---------------- Form ---------------- */
.field { margin-bottom: 16px; }
.label {
  display: block; font-size:var(--fs-3); font-weight: 600; color: var(--ink-2);
  margin-bottom: 7px; letter-spacing: 0.005em;
}
.label .req { color: var(--danger); margin-left: 2px; }
.input, .select, .textarea {
  width: 100%; padding: 9px 12px; border: 1px solid #A9B3BF;
  border-radius: var(--r-sm); font-size:var(--fs-5); font-family: inherit;
  color: var(--ink); background: #fff;
  transition: border-color var(--t-fast) var(--ease-io), box-shadow var(--t-fast) var(--ease-io);
}
/* 悬停加深一档：原 #D6DCE4 与常态几乎无差，用户感受不到「这里能操作」 */
.input:hover:not(:disabled), .select:hover:not(:disabled), .textarea:hover:not(:disabled) { border-color: #8E99A6; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-600); box-shadow: var(--focus);
}
.input::placeholder, .textarea::placeholder { color: #6E7780; }
.input:disabled, .select:disabled { background: var(--line-2); color: var(--muted); cursor: not-allowed; }
.textarea { resize: vertical; min-height: 78px; line-height: 1.65; }
/* 下拉箭头加深（--muted #6E7780 → --ink-2 #4A525A）：让「这里是个下拉」更明确 */
.select { appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A525A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; padding-right: 30px; }
.hint { font-size:var(--fs-3); color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size:var(--fs-5); font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background var(--t-fast) var(--ease-io), border-color var(--t-fast) var(--ease-io),
              color var(--t-fast) var(--ease-io), box-shadow var(--t-fast) var(--ease-io),
              transform var(--t-fast) var(--ease-io);
  white-space: nowrap; line-height: 1.3;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(0.5px); }
.btn-primary {
  background: var(--brand); color: #fff; font-weight: 650;
  box-shadow: var(--glow);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-600); box-shadow: 0 1px 2px rgba(180,86,10,.2), 0 6px 18px -3px rgba(239,127,23,.42); }
.btn-ghost { background: #fff; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brand-200); color: var(--brand-700); background: var(--brand-50); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger); }
.btn-sm { padding: 6px 11px; font-size:var(--fs-3); border-radius: var(--r-xs); }
.btn-block { width: 100%; padding: 11px; font-size:var(--fs-5); }
.btn-link {
  border: 0; background: none; color: var(--brand-700); font-weight: 600; cursor: pointer;
  font-family: inherit; font-size:var(--fs-4); padding: 4px 6px; border-radius: var(--r-xs);
  transition: background var(--t-fast) var(--ease-io);
}
.btn-link:hover { background: var(--brand-50); }
.btn-link.danger { color: var(--danger); }
.btn-link.danger:hover { background: var(--danger-bg); }

/* ---------------- App shell ----------------
   签名元素「橙色刻度条」：当前所在项左侧一道 3px 橙条。
   它同时出现在导航项、表格行、卡片标题上，构成统一的视觉语言。 */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: #fff;
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
  transition: width var(--t-slow) var(--ease), flex-basis var(--t-slow) var(--ease);
}
.sb-brand {
  padding: 20px 18px 18px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 11px; min-height: 72px;
}
.sb-brand .mark {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
  display: block; overflow: hidden; box-shadow: var(--glow);
}
.sb-brand .mark img { width: 100%; height: 100%; display: block; }
.sb-brand .txt b { display: block; font-size:var(--fs-5); font-weight: 750; letter-spacing: -0.02em; }
.sb-brand .txt span { font-size:var(--fs-1); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

.sb-nav { flex: 1; overflow-y: auto; padding: 12px 10px 16px; }

/* ============================================================
   侧栏导航层级：① 域级（顶级入口 / 分组标题） ② 模块级（分组内子项）
   两级在「字号 · 图标 · 字重 · 颜色 · 缩进 · 行高」六个维度同时拉开：
     域级   14px / 650 / 墨色 / 图标 19px / 不缩进
     模块级 12.5px / 500 / 次级灰 / 图标 15px / 缩进 43px + 引导线
   一级之间用留白分节，二级用灰色引导线串到所属域下 —— 逻辑从属一眼可读。
   ============================================================ */
.sb-group { margin: 0 0 2px; }
.sb-group + .sb-group { margin-top: 10px; }
.nav-item + .sb-group { margin-top: 10px; }   /* 分组紧跟在顶级项之后时，多留一口气形成「换节」 */

/* ---- 域级 · 可折叠分组标题（与顶级入口同级，靠右侧箭头表明「可展开」） ---- */
.sb-group-hd {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px 9px 14px; border: 0; background: none; cursor: pointer;
  font-family: inherit; text-align: left;
  font-size:var(--fs-5); font-weight: 650; color: var(--ink-2);
  letter-spacing: 0.01em; line-height: 1.4;
  border-radius: 10px; margin-bottom: 2px;
  transition: background var(--t-fast) var(--ease-io), color var(--t-fast) var(--ease-io);
}
.sb-group-hd:hover { background: var(--bg-2); color: var(--ink); }
.sb-group-hd svg { width: 19px; height: 19px; flex: 0 0 19px; stroke: currentColor; opacity: 0.85; }
.sb-group-hd > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-caret {
  width: 6px; height: 6px; flex: 0 0 6px; margin-right: 3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); opacity: 0.5;
  transition: transform var(--t) var(--ease);
}
.sb-group.open .sb-caret { transform: rotate(45deg); }
.sb-group.has-cur .sb-group-hd { color: var(--brand-700); }
.sb-group.has-cur .sb-group-hd svg { opacity: 1; }

/* ---- 模块级容器：一条灰色引导线，把子项串在所属域图标正下方 ---- */
.sb-group-bd { display: none; position: relative; padding: 1px 0 6px; }
.sb-group.open .sb-group-bd { display: block; }
.sb-group-bd::before {
  content: ""; position: absolute; left: 23px; top: 1px; bottom: 12px; width: 1px;
  background: var(--line);
}

/* 建设中徽章（职能域占位） */
.nav-soon {
  font-style: normal; flex: 0 0 auto; font-size:var(--fs-1); font-weight: 700;
  letter-spacing: 0.02em; padding: 2px 7px; border-radius: var(--r-full);
  background: var(--line-2); color: var(--muted);
}
.nav-item.active .nav-soon { background: var(--brand-100); color: var(--brand-700); }

/* ---- 域级 · 顶级入口（综合管理工作台 / 综合管理总览 / 各业务职能域） ---- */
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 14px; border-radius: 10px;
  color: var(--ink); font-size:var(--fs-5); font-weight: 650; cursor: pointer;
  margin-bottom: 2px; border: 0; background: none; width: 100%;
  font-family: inherit; text-align: left; line-height: 1.4;
  transition: background var(--t-fast) var(--ease-io), color var(--t-fast) var(--ease-io);
}
.nav-item::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--brand);
  transition: height var(--t) var(--ease);
}
.nav-item svg {
  width: 19px; height: 19px; flex: 0 0 19px; stroke: currentColor; opacity: 0.85;
  transition: opacity var(--t-fast) var(--ease-io);
}
.nav-item:hover { background: var(--bg-2); color: var(--ink); }
.nav-item:hover svg { opacity: 1; }
.nav-item.active { background: var(--brand-50); color: var(--brand-700); }
.nav-item.active svg { opacity: 1; }
.nav-item.active::before { height: 18px; }

/* ---- 模块级 · 分组内子项（整块覆盖，排在域级之后以确保生效） ---- */
.sb-group-bd .nav-item {
  padding: 7px 12px 7px 43px; border-radius: 8px;
  color: var(--ink-2); font-size:var(--fs-3); font-weight: 500;
}
.sb-group-bd .nav-item svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: 0.7; }
.sb-group-bd .nav-item::before { left: 22px; }   /* 激活刻度条移到引导线上，点亮所属分支 */
.sb-group-bd .nav-item.active::before { height: 15px; }
.sb-group-bd .nav-item:hover { color: var(--ink); }
.sb-group-bd .nav-item.active { color: var(--brand-700); font-weight: 650; }

.sb-user {
  border-top: 1px solid var(--line-2); padding: 14px; display: flex; align-items: center; gap: 10px;
  min-height: 64px;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand-700); font-weight: 700; font-size:var(--fs-4);
}
.sb-user .info { flex: 1; min-width: 0; }
.sb-user .info b { display: block; font-size:var(--fs-3); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user .info span { font-size:var(--fs-1); color: var(--muted); }
.icon-btn {
  border: 0; background: none; cursor: pointer; color: var(--muted); padding: 6px;
  border-radius: var(--r-sm); display: grid; place-items: center;
  transition: background var(--t-fast) var(--ease-io), color var(--t-fast) var(--ease-io);
}
.icon-btn:hover { background: var(--line-2); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; stroke: currentColor; }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column;
  transition: margin-left var(--t-slow) var(--ease); }
.topbar {
  height: var(--topbar-h); background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line); display: flex; align-items: center;
  gap: 14px; padding: 0 26px; position: sticky; top: 0; z-index: 50;
}
.topbar h1 { font-size:var(--fs-7); font-weight: 750; letter-spacing: -0.022em; line-height: 1.2; }
.topbar .crumb { font-size:var(--fs-3); color: var(--muted); margin-top: 2px; }
.topbar .spacer { flex: 1; }
.chip-role {
  font-size:var(--fs-3); font-weight: 700; padding: 5px 11px; border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
  letter-spacing: 0.01em;
}
.lang-toggle { display: flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--bg-2); padding: 2px; gap: 2px; }
.lang-toggle button {
  border: 0; background: transparent; padding: 5px 12px; font-size:var(--fs-3); font-weight: 650;
  color: var(--muted); cursor: pointer; font-family: inherit; border-radius: var(--r-xs);
  transition: background var(--t-fast) var(--ease-io), color var(--t-fast) var(--ease-io);
}
.lang-toggle button.active { background: #fff; color: var(--brand-700); font-weight: 700; box-shadow: var(--shadow-sm); }
/* 补悬停反馈（原来零反馈 → 看不出是按钮）。:not(.active) 保证不会把选中态「悬停掉」。 */
.lang-toggle button:not(.active):hover { background: var(--line-2); color: var(--ink); }
/* 登录前（登录 / 待审核 / 首次改密）的语言切换：固定在右上角。
   只做定位，配色与交互完全复用顶栏那套 .lang-toggle（零 JS 差异）。
   z-index 取 400：高于登录页内容，低于 .modal-mask(500) 与 .toast-root(900)，
   保证确认弹窗与提示始终盖在它之上。 */
.lang-float {
  position: fixed; top: 18px; right: 22px; z-index: 400;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 960px) {
  .lang-float { top: 14px; right: 14px; }
}
.view { padding: 24px 28px 72px; flex: 1; }

/* ============================================================
   ① 侧栏「收成图标条」
   只需给 .app 加一个 rail 类名 —— 覆盖 --sidebar-w 一个变量，
   宽度、content 左边距、内部文字显隐全部自动跟随。零 JS 逻辑改动。
   ============================================================ */
.app.rail { --sidebar-w: var(--rail-w); }
.app.rail .sidebar { overflow: visible; }
.app.rail .sb-nav { overflow: visible; padding-left: 8px; padding-right: 8px; }
.app.rail .sb-brand { justify-content: center; padding: 20px 0 18px; }
.app.rail .sb-brand .txt { display: none; }
.app.rail .sb-group-hd { justify-content: center; padding: 12px 0 6px; }
.app.rail .sb-group-hd > span,
.app.rail .sb-group-hd .sb-caret { display: none; }
/* 图标条里所有层级图标统一尺寸，让竖排图标落在同一轴线上 */
.app.rail .sb-group-hd svg,
.app.rail .sb-group-bd .nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; }
.app.rail .sb-group-bd::before { display: none; }
.app.rail .sb-group-bd .nav-item { padding-left: 0; }
.app.rail .nav-item { justify-content: center; padding: 10px 0; gap: 0; }
.app.rail .nav-item::before,
.app.rail .sb-group-bd .nav-item::before { left: 0; }
.app.rail .nav-item .nav-soon { display: none; }
.app.rail .sb-user { justify-content: center; padding: 14px 0; }
.app.rail .sb-user .info { display: none; }
/* 图标条模式下，鼠标悬停用浮层补回文字（纯 CSS，无需 JS） */
.app.rail .nav-item > span:not(.nav-soon) {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--ink); color: #fff; padding: 6px 11px; border-radius: var(--r-sm);
  font-size:var(--fs-3); font-weight: 600; white-space: nowrap; letter-spacing: 0.01em;
  opacity: 0; pointer-events: none; box-shadow: var(--shadow-lg); z-index: 80;
  transition: opacity var(--t-fast) var(--ease-io);
}
.app.rail .nav-item:hover > span:not(.nav-soon) { opacity: 1; }
/* 收起 / 展开按钮（放在顶栏最左，图标随状态旋转） */
.rail-btn svg { transition: transform var(--t-slow) var(--ease); }
.app.rail .rail-btn svg { transform: rotate(180deg); }

/* ---------------- Cards / KPI ---------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card-hd {
  padding: 15px 18px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-hd h3 { font-size:var(--fs-6); font-weight: 680; letter-spacing: -0.015em; }
.card-hd .sub { font-size:var(--fs-3); color: var(--muted); }
.card-hd .spacer { flex: 1; }
.card-bd { padding: 18px; }
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }
/* v72：6 块指标行 —— 宽屏一行六块；≤1360px 收为 3×2（块块等宽，不出现孤块 / 数字挤压） */
.kpis.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1360px) { .kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kpis.k6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* KPI：左侧短刻度条 + 数字按语义着色。
   配色纪律 —— 只有「需要注意」的指标才上色，正常指标保持墨色。 */
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 17px 19px; position: relative; overflow: hidden;
  transition: border-color var(--t-fast) var(--ease-io), box-shadow var(--t) var(--ease);
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 15px; width: 3px; height: 26px;
  border-radius: 0 3px 3px 0; background: var(--brand);
}
.kpi.k-ok::before { background: var(--ok); }
.kpi.k-warn::before { background: var(--warn); }
.kpi.k-danger::before { background: var(--danger); }
.kpi.k-gray::before { background: var(--gray); }
.kpi.k-info::before { background: var(--info); }
.kpi .k-label { font-size:var(--fs-3); color: var(--muted); font-weight: 550; margin-bottom: 7px; }
.kpi .k-val {
  font-size:var(--fs-9); font-weight: 760; letter-spacing: -0.035em; line-height: 1.08;
  font-variant-numeric: tabular-nums;
}
.kpi.k-ok .k-val { color: var(--ok); }
.kpi.k-warn .k-val { color: var(--warn); }
.kpi.k-danger .k-val { color: var(--danger); }
.kpi.k-gray .k-val { color: var(--ink-2); }
.kpi .k-val small { font-size:var(--fs-4); font-weight: 600; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.kpi .k-foot { font-size:var(--fs-3); color: var(--muted); margin-top: 7px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* ---------------- Charts ---------------- */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.bar-row .bl { width: 108px; flex: 0 0 108px; font-size:var(--fs-3); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bt { flex: 1; height: 9px; background: var(--line-2); border-radius: 6px; overflow: hidden; }
.bar-row .bf { height: 100%; border-radius: 6px; background: var(--brand); transition: width 0.5s ease; }
.bar-row .bv { width: 46px; flex: 0 0 46px; text-align: right; font-size:var(--fs-3); font-weight: 650; color: var(--ink); }

.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut { width: 148px; height: 148px; flex: 0 0 148px; position: relative; }
.donut svg { transform: rotate(-90deg); }
.donut .center {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
}
.donut .center b { display: block; font-size:var(--fs-9); font-weight: 760; letter-spacing: -0.03em; }
.donut .center span { font-size:var(--fs-3); color: var(--muted); }
.legend { flex: 1; min-width: 150px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size:var(--fs-3); margin-bottom: 8px; }
.legend-item .sw { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
.legend-item .nm { flex: 1; color: var(--ink-2); }
.legend-item .vl { font-weight: 700; }

/* ---------------- Table ---------------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size:var(--fs-4); font-variant-numeric: tabular-nums; }
table.tbl th {
  text-align: left; font-size:var(--fs-3); font-weight: 700; color: #5F6A76;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 11px 14px;
  border-bottom: 1px solid var(--line); background: var(--bg-2); white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
table.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.tbl tbody tr { transition: background var(--t-fast) var(--ease-io); }
/* 行追踪：原 var(--bg-2) var(--bg-2) 对白卡仅 1.04:1，等于没有反馈 */
table.tbl tbody tr:hover { background: var(--line-2); }
/* 整行可点击的表（如审计日志）：给足「能点进去」的暗示 —— 橙色底 + 左侧橙条 */
.tbl tbody tr[data-log]:hover { background: var(--brand-50); }
.tbl tbody tr[data-log]:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .nm-cell { display: flex; align-items: center; gap: 10px; }
.tbl .nm-cell b { font-weight: 620; }
.tbl .nm-cell .avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size:var(--fs-3); }
.tbl .sub { font-size:var(--fs-3); color: var(--muted); }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; flex-wrap: wrap; }
.empty { padding: 52px 20px; text-align: center; color: var(--muted); }
.empty svg { width: 40px; height: 40px; stroke: var(--line-2); stroke-width: 1.5; margin-bottom: 12px; }
.empty b { display: block; color: var(--ink-2); margin-bottom: 5px; font-size:var(--fs-5); font-weight: 650; }

/* 状态徽章：统一带一枚小圆点，扫读时颜色之外还多一层形状线索
   （色盲用户也能靠点的存在与位置识别「这是状态」） */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size:var(--fs-3); font-weight: 650; padding: 3px 9px;
  border-radius: var(--r-full); background: var(--gray-bg); color: var(--gray); white-space: nowrap;
}
.badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.65; flex: 0 0 5px;
}
.badge.b-ok { background: var(--ok-bg); color: var(--ok); }
.badge.b-warn { background: var(--warn-bg); color: var(--warn); }
.badge.b-danger { background: var(--danger-bg); color: var(--danger); }
.badge.b-info { background: var(--info-bg); color: var(--info); }

/* ---------------- Toolbar ---------------- */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .spacer { flex: 1; }
.search-box { position: relative; }
.search-box svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--muted); pointer-events: none;
  transition: stroke var(--t-fast) var(--ease-io);
}
.search-box:focus-within svg { stroke: var(--brand); }
.search-box .input { padding-left: 33px; min-width: 236px; }
.toolbar .select { width: auto; min-width: 136px; }

.pager { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--line-2); font-size:var(--fs-3); color: var(--muted); }
.pager .spacer { flex: 1; }
.pager button {
  border: 1px solid var(--line); background: #fff; border-radius: var(--r-xs); padding: 5px 10px;
  cursor: pointer; font-size:var(--fs-3); color: var(--ink-2); font-family: inherit; font-weight: 600;
  transition: border-color var(--t-fast) var(--ease-io), color var(--t-fast) var(--ease-io);
}
.pager button:hover:not(:disabled) { border-color: var(--brand-200); color: var(--brand-700); }
.pager button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------------- Modal ---------------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(16, 24, 40, 0.46); z-index: 500;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 20px; overflow-y: auto;
  animation: fadeIn var(--t) var(--ease-io);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; border-radius: var(--r-xl); width: 100%; max-width: 660px;
  box-shadow: var(--shadow-xl); margin: auto;
  animation: slideUp var(--t-slow) var(--ease);
}
.modal.wide { max-width: 880px; }
.modal.narrow { max-width: 430px; }
@keyframes slideUp { from { transform: translateY(16px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-hd { padding: 19px 24px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 12px; }
.modal-hd h3 { font-size:var(--fs-7); font-weight: 700; letter-spacing: -0.018em; flex: 1; }
.modal-bd { padding: 24px; }
.modal-ft {
  padding: 15px 24px; border-top: 1px solid var(--line-2); display: flex; gap: 10px;
  justify-content: flex-end; background: var(--bg-2); border-radius: 0 0 var(--r-xl) var(--r-xl);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
/* 表单分区标题：不带橙、只用一条细线与字重区分，避免与「当前所在」的橙抢注意力 */
.form-section {
  grid-column: 1 / -1; font-size:var(--fs-3); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin: 18px 0 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.form-section:first-child { margin-top: 0; }

/* ---------------- Toast ---------------- */
.toast-root { position: fixed; top: 18px; right: 18px; z-index: 900; display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--r); padding: 12px 16px; box-shadow: var(--shadow-lg);
  font-size:var(--fs-4); min-width: 254px; max-width: 384px;
  animation: slideIn var(--t-slow) var(--ease);
  display: flex; gap: 10px; align-items: flex-start; line-height: 1.55;
}
@keyframes slideIn { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast.ok { border-left-color: var(--ok); }
.toast.error { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warn); }
.toast .tx { flex: 1; }

/* ---------------- Detail ---------------- */
.detail-hd { display: flex; gap: 16px; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line-2); }
.detail-hd .avatar { width: 56px; height: 56px; flex: 0 0 56px; font-size:var(--fs-8); }
.detail-hd .meta h3 { font-size:var(--fs-7); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.detail-hd .meta .sub { font-size:var(--fs-3); color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dl { display: grid; grid-template-columns: 128px 1fr; gap: 0; font-size:var(--fs-4); }
.dl dt { color: var(--muted); padding: 9px 0; font-size:var(--fs-3); }
.dl dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line-2); word-break: break-word; }
.dl dt { border-bottom: 1px solid var(--line-2); }
.dl dd:last-of-type, .dl dt:last-of-type { border-bottom: 0; }

.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item::before {
  content: ""; position: absolute; left: -22px; top: 5px; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; border: 2.5px solid var(--brand);
}
.tl-item.tl-ok::before { border-color: var(--ok); }
.tl-item.tl-danger::before { border-color: var(--danger); }
.tl-item.tl-warn::before { border-color: var(--warn); }
.tl-item .tl-hd { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.tl-item .tl-hd b { font-size:var(--fs-5); }
.tl-item .tl-date { font-size:var(--fs-3); color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-item .tl-body { font-size:var(--fs-3); color: var(--ink-2); margin-top: 3px; line-height: 1.65; }

/* ---------------- Import ---------------- */
.drop {
  border: 2px dashed var(--line); border-radius: var(--r); padding: 34px 20px;
  text-align: center; cursor: pointer; transition: all 0.16s; background: var(--bg-2);
}
.drop:hover, .drop.over { border-color: var(--brand); background: var(--brand-50); }
.drop svg { width: 34px; height: 34px; stroke: var(--brand); margin-bottom: 10px; }
.drop b { display: block; font-size:var(--fs-5); margin-bottom: 4px; }
.drop span { font-size:var(--fs-3); color: var(--muted); }
.map-tbl select { font-size:var(--fs-3); padding: 5px 8px; min-width: 130px; }
.steps { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.step {
  display: flex; align-items: center; gap: 8px; font-size:var(--fs-3); font-weight: 600;
  color: var(--muted); padding: 6px 12px; border-radius: 20px; background: var(--line-2);
}
.step.on { background: var(--brand-50); color: var(--brand-700); }
.step.done { background: var(--ok-bg); color: var(--ok); }
.step .n { width: 18px; height: 18px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size:var(--fs-3); }

.stat-line { display: flex; gap: 22px; flex-wrap: wrap; font-size:var(--fs-4); margin-bottom: 14px; }
.stat-line b { font-weight: 700; }

/* ---------------- Pending / misc ---------------- */
.center-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: var(--bg); }
.pending-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px; max-width: 470px; text-align: center; box-shadow: var(--shadow); }
.pending-card .icon {
  width: 58px; height: 58px; border-radius: 50%; background: var(--warn-bg);
  display: grid; place-items: center; margin: 0 auto 18px;
}
.pending-card .icon svg { width: 27px; height: 27px; stroke: var(--warn); }
.pending-card h3 { font-size:var(--fs-7); margin-bottom: 9px; }
.pending-card p { color: var(--muted); font-size:var(--fs-5); line-height: 1.7; margin: 0 0 8px; }

/* ---------------- 首次登录 · 强制修改初始密码 ---------------- */
.pwd-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px 38px 26px; width: 100%; max-width: 468px; box-shadow: var(--shadow);
}
.pwd-card .icon {
  width: 58px; height: 58px; border-radius: 50%; background: rgba(239, 127, 23, 0.13);
  display: grid; place-items: center; margin: 0 auto 18px;
}
.pwd-card .icon svg { width: 27px; height: 27px; stroke: var(--brand); }
.pwd-card h3 { font-size:var(--fs-7); margin-bottom: 9px; text-align: center; }
.pwd-card > p { color: var(--muted); font-size:var(--fs-5); line-height: 1.7; margin: 0 0 16px; text-align: center; }
.pwd-user {
  text-align: center; font-size:var(--fs-3); color: var(--ink-2); font-weight: 600;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 20px; word-break: break-all;
}
.pwd-form .field { margin-bottom: 14px; }
.pwd-actions { display: flex; gap: 10px; margin-top: 20px; }
.pwd-actions .btn-primary { flex: 1; }
.pwd-tips {
  margin-top: 22px; padding-top: 15px; border-top: 1px dashed var(--line);
  font-size:var(--fs-3); color: var(--muted); line-height: 1.75;
}
.pwd-tips b { display: block; color: var(--ink-2); font-size:var(--fs-3); margin-bottom: 5px; }
.pwd-tips ul { margin: 0; padding-left: 18px; }
.pwd-tips li { margin-bottom: 3px; }

/* 初始密码展示（账号预置弹窗） */
.pwd-badge {
  display: flex; align-items: center; gap: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:var(--fs-6); font-weight: 700; letter-spacing: 0.06em;
  background: var(--warn-bg); color: var(--warn);
  border: 1px dashed var(--warn); border-radius: 8px; padding: 9px 12px;
}
.pwd-badge .btn-link { margin-left: auto; font-size:var(--fs-3); font-weight: 650; }

@media (max-width: 560px) {
  .pwd-card { padding: 26px 20px 20px; }
}

.sec-title { font-size:var(--fs-4); font-weight: 700; color: var(--ink); margin: 0 0 12px; }

@media (max-width: 980px) {
  .auth-brand { display: none; }
  .auth-panel { flex: 1 1 100%; }
}
@media (max-width: 820px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.22s; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .main { margin-left: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .view { padding: 16px 14px 50px; }
  .topbar { padding: 0 14px; }
  .menu-toggle { display: grid !important; }
}
.menu-toggle { display: none; }

/* ===========================================================
   组织管理 · 修改日志
   Organisation chart & activity log
   =========================================================== */
.sub { font-size:var(--fs-3); color: var(--muted); font-weight: 400; }
.muted { color: var(--muted); }
.badge.b-gray { background: var(--gray-bg); color: var(--gray); }

.chk {
  display: inline-flex; align-items: center; gap: 7px; font-size:var(--fs-3);
  color: var(--ink-2); cursor: pointer; user-select: none;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); white-space: nowrap;
}
.chk input { accent-color: var(--brand); width: 14px; height: 14px; margin: 0; }
.chk:hover { border-color: #D7DDE5; }

/* --- 组织树 --- */
.org-tbl td { vertical-align: middle; }
.org-node { display: flex; align-items: center; gap: 7px; min-height: 30px; }
.org-tgl {
  width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  color: var(--muted); font-size:var(--fs-3); border-radius: 4px; line-height: 1;
}
.org-tgl:hover { background: var(--line-2); color: var(--ink); }
.org-tgl.ph { cursor: default; }
.org-tgl.ph:hover { background: transparent; }
.org-dot {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
  display: grid; place-items: center; font-size:var(--fs-3); font-weight: 700;
}
.org-nm { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.org-nm b { font-weight: 620; }
.org-code {
  font-size:var(--fs-1); font-weight: 600; color: var(--muted);
  background: var(--line-2); border-radius: 5px; padding: 1.5px 6px; letter-spacing: 0.02em;
}
.org-lead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.org-lead b { font-weight: 620; }

/* --- 修改日志 --- */
.log-json {
  margin: 0; padding: 13px 15px; background: var(--line-2); border: 1px solid var(--line);
  border-radius: var(--r); font-size:var(--fs-3); line-height: 1.65; overflow: auto; max-height: 280px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-2); white-space: pre-wrap; word-break: break-word;
}
#lg-kpis .k-val { font-size:var(--fs-9); }
.tbl tbody tr[data-log]:hover { background: var(--brand-50); }
.tbl tbody tr[data-log]:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

/* --- 编制快照：月度趋势 --- */
.sec-title .sub { margin-left: 10px; font-weight: 400; }
.trend { display: flex; align-items: flex-end; gap: 10px; height: 172px; padding-top: 4px; }
.trend-col { flex: 1; min-width: 36px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.trend-col .tv { font-size:var(--fs-3); font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.trend-col .tb {
  flex: 1; width: 100%; max-width: 48px; display: flex; align-items: flex-end;
  background: var(--line-2); border-radius: 7px; overflow: hidden;
}
.trend-col .tf { width: 100%; border-radius: 7px; background: linear-gradient(180deg, var(--brand-400), var(--brand)); transition: height 0.45s ease; }
.trend-col .tl { font-size:var(--fs-3); color: var(--muted); margin-top: 7px; white-space: nowrap; }

/* ===========================================================
   招聘管理 / 薪酬福利（Recruitment · Compensation & Benefits）
   =========================================================== */

/* --- 视图页签（分段控件：2–5 个互斥视图时最省认知成本） ---
   ★ 可辨识度修正：
   · 宽度改为「内容自适应」——原 `max-width: 560px` + `button{flex:1}` 会让 6 个以上
     页签被强行等分到 35–66px，中文在任意两字间断行 → 页签栏拆成两行。
   · 容器底色原为 var(--line-2) #F1F4F7，与页面底 #F4F6F9 对比度仅 1.02:1，
     容器在视觉上「不存在」→ 白底 + 细边框 + 轻阴影，让它真正从背景里浮出来。
   · 激活态改「橙底 + 橙描边」（原来是白胶囊，因容器不可见而失去参照物）。 */
.vtabs {
  display: flex; gap: 4px; background: var(--card);
  border: 1px solid #DFE5EC; padding: 4px;
  border-radius: 12px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  width: fit-content; max-width: 100%;
  overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: thin;
}
.vtabs::-webkit-scrollbar { height: 4px; }
.vtabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.vtabs button {
  flex: 0 0 auto; white-space: nowrap; min-width: 84px;
  border: 1px solid transparent; background: transparent; padding: 8px 14px; border-radius: 9px;
  font-size:var(--fs-5); font-weight: 600; color: var(--ink-2); cursor: pointer;
  font-family: inherit; transition: background var(--t-fast) var(--ease-io),
    color var(--t-fast) var(--ease-io), border-color var(--t-fast) var(--ease-io);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.vtabs button:hover { background: var(--line-2); color: var(--ink); }
.vtabs button.active {
  background: var(--brand-50); color: var(--brand-700);
  border-color: var(--brand-200); box-shadow: none;
}
.vt-n {
  font-size:var(--fs-3); font-weight: 700; background: var(--line-2); color: var(--ink-2);
  border-radius: var(--r-full); padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.vtabs button.active .vt-n { background: var(--brand-700); color: #fff; }

/* --- 全链路提示条 / Offer 审批块 --- */
.chain-tip {
  font-size:var(--fs-3); line-height: 1.6; color: var(--ink-2); background: var(--brand-50);
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 13px; margin: -6px 0 16px;
}
.offer-box {
  background: var(--line-2); border-radius: 9px; padding: 11px 13px; margin-bottom: 4px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}

/* --- 到岗进度 --- */
.prog-wrap { display: flex; align-items: center; gap: 9px; min-width: 132px; }
.prog { flex: 1; height: 6px; background: var(--line-2); border-radius: 20px; overflow: hidden; }
.prog-bar { height: 100%; border-radius: 20px; background: var(--brand); transition: width 0.4s ease; }
.prog-bar.mid { background: var(--warn); }
.prog-bar.ok { background: var(--ok); }
.prog-txt { font-size:var(--fs-3); font-weight: 650; color: var(--ink-2); white-space: nowrap; }

/* --- 招聘漏斗看板 --- */
.kanban { display: flex; gap: 12px; padding: 16px 18px 20px; overflow-x: auto; align-items: flex-start; }
.kb-col { flex: 1 1 0; min-width: 196px; background: var(--line-2); border-radius: var(--r); padding: 10px; }
.kb-hd { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; font-size:var(--fs-3); }
.kb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray); }
.kb-dot.b-ok { background: var(--ok); }
.kb-dot.b-warn { background: var(--warn); }
.kb-dot.b-info { background: var(--info); }
.kb-dot.b-danger { background: var(--danger); }
.kb-hd .badge { margin-left: auto; }
.kb-list { display: flex; flex-direction: column; gap: 8px; }
.kb-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px;
  cursor: pointer; transition: all 0.15s; box-shadow: var(--shadow-sm);
}
.kb-card:hover { border-color: var(--brand-400); box-shadow: var(--shadow); transform: translateY(-1px); }
.kb-name { font-size:var(--fs-5); font-weight: 650; display: flex; align-items: center; gap: 6px; }
.kb-sub { font-size:var(--fs-3); color: var(--muted); margin-top: 2px; }
.kb-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size:var(--fs-3); color: var(--ink-2); margin-top: 6px; }
.kb-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.kb-stage { font-size:var(--fs-1); color: var(--muted); flex: 1; text-align: center; }
.kb-btn {
  border: 1px solid var(--line); background: var(--card); border-radius: 6px; width: 26px; height: 24px;
  cursor: pointer; color: var(--ink-2); font-size:var(--fs-5); line-height: 1; font-family: inherit; padding: 0;
}
.kb-btn:hover:not(:disabled) { border-color: var(--brand-200); color: var(--brand-700); }
.kb-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.kb-empty { font-size:var(--fs-3); color: var(--muted); text-align: center; padding: 14px 6px; }

/* --- 评分 / 汇总行 --- */
.rate-star { color: #e8a400; font-size:var(--fs-3); letter-spacing: 0.5px; }
.muted { color: var(--muted); }
.tbl tr.row-total td { background: var(--line-2); border-top: 2px solid var(--line); }
.tbl td .sub { font-size:var(--fs-3); color: var(--muted); }

/* --- 候选人详情 --- */
.detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.avatar-lg {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  font-size:var(--fs-6); font-weight: 700; flex: none;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 20px; padding: 5px 12px;
  font-size:var(--fs-3); font-weight: 550; color: var(--ink-2); cursor: pointer; font-family: inherit;
}
.chip:hover { border-color: var(--brand-200); color: var(--brand-700); }
.chip.active { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-700); font-weight: 650; }

/* --- 金额 / 数字 --- */
.input.num, input.num { text-align: right; font-variant-numeric: tabular-nums; }
.input[readonly] { background: var(--line-2); color: var(--ink-2); font-weight: 650; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ===========================================================
   人事报表 / HR Reports & Dashboards
   =========================================================== */
/* --- 仪表盘选择 chips --- */
.rep-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rep-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--card); border-radius: 20px;
  padding: 7px 14px; font-size:var(--fs-4); font-weight: 600; color: var(--ink-2);
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.rep-chip:hover { border-color: var(--brand-200); color: var(--brand-700); }
.rep-chip.active { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-700); }
.rep-chip .n {
  font-size:var(--fs-3); font-weight: 700; background: var(--brand-50); color: var(--brand-700);
  border-radius: 20px; padding: 1px 7px;
}
.rep-chip.active .n { background: var(--brand-100); color: var(--brand-700); }

/* --- 报表页：侧栏 + 主区 --- */
.rep-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 18px; align-items: start; }
.rep-side {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; position: sticky; top: 12px; max-height: calc(100vh - 150px); overflow: auto;
}
.rep-side-group {
  font-size:var(--fs-3); font-weight: 700; letter-spacing: 0.04em; color: var(--muted);
  padding: 10px 10px 6px; text-transform: uppercase;
}
.rep-side-item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 8px 10px; border-radius: 8px; font-size:var(--fs-4); color: var(--ink-2);
  cursor: pointer; font-family: inherit; transition: all 0.12s;
}
.rep-side-item:hover { background: var(--line-2); color: var(--brand-700); }
.rep-side-item.active { background: var(--brand-50); color: var(--brand-700); font-weight: 650; }
.rep-main { min-width: 0; }

/* --- 自定义仪表盘：组件挑选 --- */
.rep-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 4px; }
.rep-picker-group { border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.rep-picker-title {
  font-size:var(--fs-3); font-weight: 700; color: var(--muted); margin-bottom: 8px;
  letter-spacing: 0.03em;
}
.rep-pick {
  display: block; width: 100%; text-align: left; border: 1px solid var(--line);
  background: var(--card); border-radius: 8px; padding: 7px 10px; margin-bottom: 6px;
  font-size:var(--fs-3); color: var(--ink-2); cursor: pointer; font-family: inherit; transition: all 0.12s;
}
.rep-pick:hover { border-color: var(--brand-200); color: var(--brand-700); }
.rep-pick.on { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-700); font-weight: 650; }
.rep-pick:last-child { margin-bottom: 0; }
.rep-builder-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2);
}
.rep-builder-actions .spacer { flex: 1; }

/* --- 报表卡片 --- */
.rep-card .card-hd { gap: 10px; }
.rep-card .card-bd { padding-bottom: 14px; }
.rep-card .grid.cols-2 { gap: 18px; }

@media (max-width: 820px) {
  .rep-layout { grid-template-columns: 1fr; }
  .rep-side { position: static; max-height: none; }
}

/* ===========================================================
   员工档案扩展 / 合同管理 / 离职管理
   Employee Profile · Contracts · Offboarding
   =========================================================== */

/* --- 更多页签（可横向滚动） --- */
.vtabs.wide { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.vtabs.wide button { flex: 0 0 auto; white-space: nowrap; min-width: 96px; }
.vtabs.wide::-webkit-scrollbar { height: 5px; }
.vtabs.wide::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* --- 批次①：人员类别分栏（中方 / 本地 各类分别成列表） --- */
.cat-tabs { margin: 10px 0 2px; padding-bottom: 2px; }
.cat-tabs button { font-size:var(--fs-3); }
.cat-tabs button.active { font-weight: 640; }

/* --- 批次①：花名册表格（列较多 → 单行不折行 + 容器横向滚动） --- */
.tbl-roster { min-width: 1080px; }
.tbl-roster th, .tbl-roster td { white-space: nowrap; }
.tbl-roster .nm-cell { min-width: 190px; }
.tbl-roster .row-actions { white-space: nowrap; flex-wrap: nowrap; }
.tbl-roster .badge { white-space: nowrap; }

/* --- 子表区块（档案弹窗内） --- */
.sub-block { border-top: 1px solid var(--line-2); padding-top: 14px; margin-top: 4px; }
.sub-block .sec-title { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.sub-block .sec-title .spacer { flex: 1; }
.sub-tbl { font-size:var(--fs-3); }
.sub-tbl th { padding: 8px 11px; font-size:var(--fs-3); }
.sub-tbl td { padding: 9px 11px; }
.sub-empty {
  border: 1px dashed var(--line); border-radius: var(--r); padding: 26px 18px;
  text-align: center; color: var(--muted); font-size:var(--fs-3);
}
.sub-empty b { display: block; color: var(--ink-2); font-size:var(--fs-5); margin-bottom: 4px; }

/* --- 卡片式条目（教育 / 经历 / 证书） --- */
.rec-list { display: grid; gap: 10px; }
.rec-item {
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
  background: var(--card); position: relative; transition: border-color 0.12s;
}
.rec-item:hover { border-color: var(--brand-400); }
.rec-item .rec-hd { display: flex; align-items: flex-start; gap: 10px; }
.rec-item .rec-hd b { font-size:var(--fs-5); font-weight: 650; }
.rec-item .rec-hd .spacer { flex: 1; }
.rec-item .rec-sub { font-size:var(--fs-3); color: var(--muted); margin-top: 3px; }
.rec-item .rec-meta { font-size:var(--fs-3); color: var(--ink-2); margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rec-item .rec-meta span b { color: var(--ink); font-weight: 620; }
.rec-item .rec-act { display: flex; gap: 2px; }
.rec-tag {
  font-size:var(--fs-3); font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: var(--brand-50); color: var(--brand-700); white-space: nowrap;
}
.rec-tag.t-ok { background: var(--ok-bg); color: var(--ok); }
.rec-tag.t-danger { background: var(--danger-bg); color: var(--danger); }
.rec-tag.t-warn { background: var(--warn-bg); color: var(--warn); }
.rec-tag.t-gray { background: var(--gray-bg); color: var(--gray); }

/* --- 档案变更历史 --- */
.pf-log { display: grid; gap: 8px; }
.pf-log-item {
  display: flex; gap: 12px; align-items: flex-start; font-size:var(--fs-3);
  padding: 9px 0; border-bottom: 1px solid var(--line-2);
}
.pf-log-item:last-child { border-bottom: 0; }
.pf-log-item .pf-when { flex: 0 0 128px; color: var(--muted); font-size:var(--fs-3); }
.pf-log-item .pf-body { flex: 1; }
.pf-log-item .pf-body .pf-f { font-weight: 650; color: var(--ink-2); }
.pf-log-item .pf-body .pf-v { color: var(--muted); }
.pf-log-item .pf-body .pf-v del { color: var(--danger); text-decoration: line-through; opacity: 0.8; }
.pf-log-item .pf-body .pf-v ins { color: var(--ok); text-decoration: none; font-weight: 620; }

/* --- 合同 / 离职 提示条 --- */
.warn-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid #F0D8A6; background: var(--warn-bg); color: var(--warn);
  border-radius: var(--r); padding: 10px 14px; font-size:var(--fs-3); font-weight: 550;
  margin-bottom: 14px;
}
.warn-strip svg { width: 16px; height: 16px; flex: 0 0 16px; }
.warn-strip .spacer { flex: 1; }
.warn-strip.danger { border-color: #F3C9C3; background: var(--danger-bg); color: var(--danger); }

/* --- 交接清单 / 资产归还勾选 --- */
.check-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.check-list .ck {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line-2); font-size:var(--fs-4); cursor: pointer;
}
.check-list .ck:last-child { border-bottom: 0; }
.check-list .ck:hover { background: var(--bg-2); }
.check-list .ck input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.check-list .ck .ck-nm { flex: 1; color: var(--ink-2); }
.check-list .ck.done .ck-nm { color: var(--muted); text-decoration: line-through; }
.check-list .ck .ck-note { font-size:var(--fs-3); color: var(--muted); }

/* --- 进度条（交接完成度） --- */
.progline { display: flex; align-items: center; gap: 10px; font-size:var(--fs-3); color: var(--muted); }
.progline .pb { flex: 1; height: 7px; background: var(--line-2); border-radius: 6px; overflow: hidden; }
.progline .pf { height: 100%; background: var(--brand); border-radius: 6px; transition: width 0.4s; }
.progline .pv { flex: 0 0 40px; text-align: right; font-weight: 650; color: var(--ink-2); }

/* --- 步骤条（离职流程） --- */
.flow-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.flow-steps .fs {
  display: inline-flex; align-items: center; gap: 7px; font-size:var(--fs-3); font-weight: 600;
  color: var(--muted); background: var(--line-2); border-radius: 20px; padding: 5px 12px;
}
.flow-steps .fs.on { background: var(--brand-50); color: var(--brand-700); }
.flow-steps .fs.ok { background: var(--ok-bg); color: var(--ok); }
.flow-steps .fs .n {
  width: 17px; height: 17px; border-radius: 50%; background: var(--card); display: grid;
  place-items: center; font-size:var(--fs-1); font-weight: 700;
}
.flow-steps .fs.on .n { background: var(--brand-700); color: #fff; }
.flow-steps .fs.ok .n { background: var(--ok); color: #fff; }

/* ===========================================================
   审批与工作流（Approvals & Workflow）
   =========================================================== */

/* --- KPI 补充态 --- */
.kpi.k-info::before { background: var(--info); }

/* --- 审批链路节点条 --- */
.fn-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; }
.fn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size:var(--fs-3); font-weight: 600; color: var(--muted); background: var(--line-2);
  border: 1px solid transparent; border-radius: 20px; padding: 5px 12px; white-space: nowrap;
}
.fn-line em { color: var(--muted); font-size:var(--fs-6); font-style: normal; font-weight: 700; line-height: 1; }
.fn i {
  width: 17px; height: 17px; border-radius: 50%; background: var(--card); display: grid;
  place-items: center; font-size:var(--fs-1); font-weight: 700; font-style: normal;
}
.fn.on { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-400); }
.fn.on i { background: var(--brand-700); color: #fff; }
.fn.ok { background: var(--ok-bg); color: var(--ok); }
.fn.ok i { background: var(--ok); color: #fff; }
.fn.no { background: var(--danger-bg); color: var(--danger); }
.fn.no i { background: var(--danger); color: #fff; }
.fn.skip { opacity: 0.5; text-decoration: line-through; }
.fn.cc { background: var(--info-bg); color: var(--info); }
.fn.wait { background: var(--line-2); color: var(--muted); }
.fn.block { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.fn.block i { background: var(--danger); color: #fff; }

/* --- 跨模块待办聚合 --- */
.inbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; padding: 4px 18px 18px; }
.inbox-col { background: var(--line-2); border-radius: var(--r); padding: 10px 12px; }
.inbox-hd {
  display: flex; align-items: center; gap: 7px; padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line); font-size:var(--fs-3); font-weight: 650; color: var(--ink-2);
}
.inbox-row { padding: 6px 2px; border-bottom: 1px dashed var(--line-2); }
.inbox-row:last-child { border-bottom: 0; }
.inbox-t { font-size:var(--fs-3); color: var(--ink-2); }

/* --- 流程跟踪弹窗头部 --- */
.tk-head { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.tk-title { font-size:var(--fs-6); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; }

/* --- 通用小表 / 警示行 --- */
.tbl-sm th, .tbl-sm td { padding: 7px 9px; font-size:var(--fs-3); }
.tbl tr.row-warn td { background: var(--warn-bg); }
.tbl tr.row-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* --- 行内复选框 --- */
.chk-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size:var(--fs-3); color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.chk-inline input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

/* --- 流程设计器：分段编辑表 --- */
.seg-tbl { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 9px; }
.seg-tbl .tbl { min-width: 100%; border: 0; }
.seg-tbl .tbl th, .seg-tbl .tbl td { padding: 5px 6px; white-space: nowrap; }
.seg-tbl .tbl th { font-size:var(--fs-3); }
.seg-tbl .input, .seg-tbl .select { padding: 5px 7px; font-size:var(--fs-3); min-width: 74px; }
.seg-tbl .input[data-df-n-name] { min-width: 110px; }
.seg-tbl .input[data-df-f-label] { min-width: 96px; }

/* --- 弹窗内行内元信息行 --- */
.tl-meta-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size:var(--fs-4); color: var(--ink-2); padding: 9px 12px; background: var(--line-2);
  border-radius: 9px; margin-bottom: 16px;
}
.tl-meta-line code { font-size:var(--fs-3); color: var(--muted); background: var(--card); padding: 1px 6px; border-radius: 5px; }

/* ===========================================================
   考勤与休假 · 4.1 排班与规则
   =========================================================== */

/* 工作日多选（复选框行） */
.chk-row { display: flex; flex-wrap: wrap; gap: 12px 18px; padding: 6px 0 2px; }

/* 双列并排输入（如弹性核心时段 起 / 止） */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 多选下拉（适用部门） */
select.select[multiple] { height: auto; min-height: 108px; padding: 6px; }
select.select[multiple] option { padding: 3px 6px; border-radius: 5px; }

/* 排班表：休息 / 节假日行左侧警示条（与 .row-warn 配合） */
.tbl tr.row-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* ===========================================================
   考勤与休假 · 4.4 考勤统计
   =========================================================== */

/* 二级分段（月汇总 / 日汇总 / 异常 / 加班 / 旷工 / 报表） */
.vtabs.sub-tabs { margin-top: -2px; }
.vtabs.sub-tabs button { padding: 4px 12px; font-size:var(--fs-3); }

/* 横向条形分布（异常类型 / 加班类型 / 部门占比） */
.bar-row { display: grid; grid-template-columns: 116px 1fr 74px; gap: 10px; align-items: center; padding: 5px 0; }
.bar-name { font-size:var(--fs-3); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 9px; border-radius: 5px; background: var(--line-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; background: var(--brand); }
.bar-fill.t-ok { background: var(--ok); }
.bar-fill.t-warn { background: var(--warn); }
.bar-fill.t-danger { background: var(--danger); }
.bar-fill.t-gray { background: var(--gray); }
.bar-fill.t-info { background: var(--info); }
.bar-val { font-size:var(--fs-3); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

/* 统计区块卡片 */
.stat-block {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px; margin-top: 14px;
}
.stat-block > h4 { font-size:var(--fs-4); color: var(--ink-2); margin-bottom: 10px; }
.stat-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin-top: 14px; }
@media (max-width: 900px) { .stat-2col { grid-template-columns: 1fr; } }

/* 通用栅格工具类（.grid.g2/.g3/.g4）：宽屏多列 · ≤980px 收单列（评审批次A补齐） */
.grid.g2 { grid-template-columns: 1fr 1fr; }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; } }

/* 合计行 */
.tbl tr.row-total td { font-weight: 650; background: var(--line-2); }

/* ============================================================
   站内消息中心（顶栏铃铛 + 消息面板）
   =========================================================== */
.msg-btn { position: relative; margin-right: 4px; }
.msg-dot {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size:var(--fs-1); font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--card);
}
.msg-dot.hidden { display: none; }

.msg-list { max-height: 60vh; overflow-y: auto; }
.msg-item {
  display: flex; gap: 10px; padding: 11px 12px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
}
.msg-item + .msg-item { margin-top: 4px; }
.msg-item:hover { background: var(--bg-2); border-color: var(--line); }
.msg-item.unread { background: var(--brand-50); border-color: var(--brand-100); }
.msg-ico {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--line-2); color: var(--ink-2);
}
.msg-ico svg { width: 15px; height: 15px; stroke: currentColor; }
.msg-item.unread .msg-ico { background: var(--brand-100); color: var(--brand-700); }
.msg-item.t-warn .msg-ico { background: #FDECEA; color: var(--danger); }
.msg-item.t-approve .msg-ico { background: var(--brand-50); color: var(--brand-700); }
.msg-body { flex: 1; min-width: 0; }
.msg-title { font-size:var(--fs-4); font-weight: 600; color: var(--ink); }
.msg-text { font-size:var(--fs-3); color: var(--muted); margin-top: 2px; }
.msg-time { font-size:var(--fs-3); color: var(--muted); margin-top: 5px; }
.msg-empty { padding: 34px 12px; text-align: center; color: var(--muted); font-size:var(--fs-4); }

/* ============================================================
   用人需求（3.1）：在职 / 编制比对 + 审批提示条
   =========================================================== */
.hc-box {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px;
}
.hc-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hc-line span { display: flex; align-items: baseline; gap: 6px; font-size:var(--fs-3); color: var(--muted); }
.hc-line span i { font-style: normal; }
.hc-line span b { font-size:var(--fs-7); color: var(--ink); font-variant-numeric: tabular-nums; }
.hc-tag { margin-left: auto; padding: 3px 10px; border-radius: 20px; font-size:var(--fs-3); font-weight: 650; }
.hc-tag.in { background: #E8F6EF; color: var(--ok); }
.hc-tag.out { background: #FDECEA; color: var(--danger); }
.notice.brand { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand-700); }

/* ============================================================
   候选人跟进台 / 简历批量导入 / 人才库（批次 B）
   =========================================================== */

/* 7 环节推进条 */
.step-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 2px; }
.step-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--card); border-radius: 20px;
  padding: 5px 12px; font-size:var(--fs-3); font-weight: 550; color: var(--ink-2);
  cursor: pointer; font-family: inherit; transition: all 0.14s;
}
.step-chip:hover { border-color: var(--brand-200); color: var(--brand-700); }
.step-chip.on { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-700); font-weight: 650; }
.step-chip .sc-n {
  font-size:var(--fs-3); font-weight: 700; background: var(--line-2); color: var(--muted);
  border-radius: 20px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.step-chip.on .sc-n { background: var(--brand-700); color: #fff; }

/* 批量操作条 */
.bulk-bar {
  position: sticky; top: 6px; z-index: 6;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 14px; margin-bottom: 12px;
  background: var(--brand-50); border: 1px solid var(--brand-200);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.bulk-bar b { font-size:var(--fs-4); color: var(--brand-700); }
.bulk-bar .spacer { flex: 1; }

/* 简历拖拽区 */
.imp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 30px 18px; border: 1.5px dashed var(--brand-300); border-radius: var(--r-lg);
  background: var(--brand-50); color: var(--brand-700); cursor: pointer; text-align: center;
  transition: all 0.15s;
}
.imp-drop:hover { border-color: var(--brand); background: var(--brand-100); }
.imp-drop.on { border-color: var(--brand); border-style: solid; background: var(--brand-100); box-shadow: var(--glow); }
.imp-drop svg { width: 28px; height: 28px; stroke: currentColor; }
.imp-drop b { font-size:var(--fs-5); }

/* 粘贴简历文本（折叠区） */
.imp-paste { margin-top: 12px; }
.imp-paste > summary {
  list-style: none; cursor: pointer; font-size:var(--fs-3); font-weight: 600;
  color: var(--brand-700); padding: 6px 2px; user-select: none;
}
.imp-paste > summary::-webkit-details-marker { display: none; }
.imp-paste > summary::before { content: '▸ '; font-size:var(--fs-3); }
.imp-paste[open] > summary::before { content: '▾ '; }
.imp-paste .textarea { margin-top: 6px; }
.imp-paste .btn { margin-top: 8px; }

/* 预览表内联编辑控件 */
.tbl td > .input, .tbl td > .select { padding: 5px 8px; font-size:var(--fs-3); }
.tbl td > .select { max-width: 130px; }

/* 小号加载指示 */
.spinner.sm { width: 12px; height: 12px; border-width: 2px; display: inline-block; vertical-align: -1px; }
.badge .spinner.sm { margin-right: 4px; }

/* ============================================================
   批次 C：面试管理（面试日程 / 待我评价 / 面试官安排）
   ============================================================ */

/* 视图切换（周 / 月 / 列表）与翻页条 */
.iv-views { margin: 12px 0 4px; }
.iv-bar {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 12px;
  flex-wrap: wrap;
}
.iv-bar .iv-range { font-size:var(--fs-5); color: var(--ink); font-weight: 600; letter-spacing: 0.2px; }

/* ---- 周视图 ---- */
.iv-week {
  display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr));
  gap: 8px; overflow-x: auto; padding-bottom: 4px;
}
.iv-col {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
  min-height: 168px; display: flex; flex-direction: column;
}
.iv-col.today { border-color: var(--brand-300); background: var(--brand-50); }
.iv-col-h {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  border-bottom: 1px solid var(--line); font-size:var(--fs-3); color: var(--muted);
}
.iv-col-h b { color: var(--ink); font-size:var(--fs-3); }
.iv-col-h .badge { margin-left: auto; font-style: normal; }
.iv-col-b { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.iv-none { color: var(--faint); text-align: center; font-size:var(--fs-3); padding: 18px 0; }

/* 面试卡片（周视图） */
.iv-card {
  text-align: left; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--faint); border-radius: var(--r-sm);
  padding: 8px 9px; cursor: pointer; transition: all 0.14s; font: inherit; width: 100%;
}
.iv-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.iv-card.t-scheduled { border-left-color: var(--info); }
.iv-card.t-done { border-left-color: var(--ok); }
.iv-card.t-cancelled { border-left-color: var(--gray); opacity: 0.72; }
.iv-card.t-noshow { border-left-color: var(--danger); }
.iv-c-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.iv-c-t { font-size:var(--fs-3); color: var(--brand-700); font-weight: 700; }
.iv-c-top .badge { margin-left: auto; font-size:var(--fs-1); padding: 1px 6px; }
.iv-c-n { font-size:var(--fs-4); font-weight: 600; color: var(--ink); }
.iv-c-s { font-size:var(--fs-3); color: var(--muted); margin-top: 1px; }
.iv-c-f { font-size:var(--fs-3); color: var(--faint); margin-top: 4px; }

/* ---- 月视图 ---- */
.iv-month-h {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  font-size:var(--fs-3); color: var(--muted); text-align: center; margin-bottom: 5px;
}
.iv-month { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(88px, auto); gap: 6px; }
.iv-cell {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  padding: 5px 5px 6px; min-height: 88px; display: flex; flex-direction: column; gap: 3px;
}
.iv-cell.other { background: var(--bg); opacity: 0.6; }
.iv-cell.today { border-color: var(--brand-300); background: var(--brand-50); }
.iv-cell-d { font-size:var(--fs-3); color: var(--muted); font-weight: 600; }
.iv-mini {
  display: flex; align-items: center; gap: 5px; text-align: left; font: inherit;
  border: none; border-left: 3px solid var(--faint); background: var(--bg-2);
  color: var(--ink); border-radius: 5px; padding: 3px 6px; cursor: pointer;
  font-size:var(--fs-3); width: 100%; overflow: hidden;
}
.iv-mini:hover { background: var(--brand-50); }
.iv-mini.t-scheduled { border-left-color: var(--info); }
.iv-mini.t-done { border-left-color: var(--ok); }
.iv-mini.t-cancelled { border-left-color: var(--gray); opacity: 0.7; }
.iv-mini.t-noshow { border-left-color: var(--danger); }
.iv-mini-t { color: var(--brand-700); font-weight: 700; flex: none; }
.iv-mini-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-more { font-size:var(--fs-1); color: var(--brand-700); padding-left: 4px; }

/* ---- 键值表 / 分区 ---- */
.iv-kv { display: grid; grid-template-columns: 108px 1fr; gap: 7px 12px; align-items: start; }
.iv-kv-k { font-size:var(--fs-3); color: var(--muted); }
.iv-kv-v { font-size:var(--fs-4); color: var(--ink); word-break: break-word; }
.iv-kv-v a { color: var(--brand-700); }
.iv-sec { margin: 16px 0 0; }
.iv-sec h4 {
  margin: 0 0 9px; font-size:var(--fs-3); color: var(--ink-2); font-weight: 700;
  text-transform: none; padding-bottom: 6px; border-bottom: 1px solid var(--line-2);
}
.iv-sec h4 .req { color: var(--danger); margin-left: 3px; }

/* ---- 抽屉头部 ---- */
.iv-dr-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iv-dr-n { font-size:var(--fs-7); font-weight: 700; color: var(--ink); }
.iv-dr-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- 面试官 ---- */
.iv-pans { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-pan {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); font-size:var(--fs-3);
}
.iv-pan-n { color: var(--ink); font-weight: 600; }
.iv-star-mini { color: var(--brand); }

/* 面试官多选（安排表单） */
.iv-users {
  max-height: 190px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--bg-2); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.iv-user {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  border-radius: 6px; cursor: pointer; font-size:var(--fs-4);
}
.iv-user:hover { background: var(--brand-50); }
.iv-user-n { color: var(--ink); }
.iv-user-d { color: var(--muted); font-size:var(--fs-3); }
.iv-user .iv-ul { margin-left: auto; accent-color: var(--brand); }
.iv-chk { display: inline-flex; align-items: center; gap: 7px; font-size:var(--fs-4); color: var(--ink); cursor: pointer; }
.iv-chk input { accent-color: var(--brand); }

/* ---- 评分（1-5 星） ---- */
.iv-cr { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.iv-cr-l { width: 96px; font-size:var(--fs-4); color: var(--ink-2); flex: none; }
.iv-stars { display: flex; gap: 2px; }
.iv-star {
  border: none; background: none; cursor: pointer; font-size:var(--fs-7); line-height: 1;
  color: var(--line); padding: 0 1px; transition: color 0.12s, transform 0.12s;
}
.iv-star:hover:not(:disabled) { transform: scale(1.12); }
.iv-star.on { color: var(--brand); }
.iv-star:disabled { cursor: default; }
.iv-cr-v { font-size:var(--fs-3); color: var(--muted); min-width: 16px; }

/* ---- 最终意见（大按钮） ---- */
.iv-opins { display: flex; gap: 10px; flex-wrap: wrap; }
.iv-opin-btn {
  flex: 1; min-width: 108px; padding: 12px 10px; font-size:var(--fs-5); font-weight: 700;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: var(--r); cursor: pointer; transition: all 0.14s; font-family: inherit;
}
.iv-opin-btn:hover { border-color: var(--brand-300); }
.iv-opin-btn.on.t-hire { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.iv-opin-btn.on.t-reject { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.iv-opin-btn.on.t-hold { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.iv-opin { margin-top: 4px; }
.iv-ro {
  font-size:var(--fs-4); color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 10px; white-space: pre-wrap;
}

/* ---- 评价列表 ---- */
.iv-avg { font-size:var(--fs-3); color: var(--brand-700); font-weight: 600; margin-bottom: 8px; }
.iv-rev {
  border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px;
  margin-bottom: 8px; background: var(--card);
}
.iv-rev-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.iv-rev-h b { font-size:var(--fs-4); color: var(--ink); }
.iv-rev-t { font-size:var(--fs-3); color: var(--faint); margin-left: auto; }
.iv-rev-crs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; }
.iv-rev-cr { font-size:var(--fs-3); color: var(--muted); }
.iv-rev-cr .rate-star { font-size:var(--fs-3); }
.iv-rev-p { font-size:var(--fs-3); color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.iv-rev-p i { color: var(--muted); font-style: normal; margin-right: 6px; font-size:var(--fs-3); }
.iv-rev-a { margin-top: 6px; }

/* ---- 待我评价 ---- */
.iv-mine { display: flex; flex-direction: column; gap: 10px; }
.iv-sec-t { font-size:var(--fs-3); color: var(--muted); font-weight: 700; margin: 10px 0 2px; }
.iv-mcard {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  border-left: 3px solid var(--brand);
}
.iv-mcard.done { border-left-color: var(--ok); background: var(--bg-2); }
.iv-mc-l { flex: 1; min-width: 0; }
.iv-mc-n { font-size:var(--fs-5); font-weight: 700; color: var(--ink); }
.iv-mc-s { font-size:var(--fs-3); color: var(--muted); margin-top: 2px; }
.iv-mc-r { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* =====================================================================
   批次 D：3.4 Offer 管理（of-*）
   ===================================================================== */
.of-todo {
  background: var(--warn-bg); border: 1px solid #FFE1AB; border-radius: var(--r);
  padding: 9px 13px; margin-bottom: 14px;
}
.of-todo-hd { font-size:var(--fs-3); font-weight: 700; color: #8A5300; margin-bottom: 7px; }
.of-todo-list { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.of-chip {
  border: 1px solid var(--brand-200); background: #fff; color: var(--brand-700);
  border-radius: 20px; padding: 3px 11px; font-size:var(--fs-3); cursor: pointer;
  font-family: inherit; transition: all 0.15s ease;
}
.of-chip:hover { background: var(--brand-50); border-color: var(--brand-300); }

.of-sec { margin-top: 16px; }
.of-sec h4 {
  font-size:var(--fs-4); font-weight: 700; color: var(--ink); margin: 0 0 9px;
  padding-left: 8px; border-left: 3px solid var(--brand);
}
.of-kv { display: grid; grid-template-columns: 128px 1fr; gap: 7px 12px; align-items: start; }
.of-kv-k { font-size:var(--fs-3); color: var(--muted); }
.of-kv-v { font-size:var(--fs-4); color: var(--ink); word-break: break-word; }
.of-kv-v a { color: var(--brand-700); }

.of-hd { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.of-hd-l b { font-size:var(--fs-6); color: var(--ink); }
.of-hd .badge { margin-left: auto; }

/* 流转时间轴 */
.of-tl { display: flex; flex-wrap: wrap; gap: 6px; }
.of-tl-i {
  font-size:var(--fs-3); color: var(--faint); background: var(--line-2);
  border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px;
}
.of-tl-i.on { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-200); font-weight: 600; }
.of-tl-i.cur { border-color: var(--brand-400); box-shadow: 0 0 0 2px var(--brand-100); font-weight: 700; }

.of-trail { margin: 0; padding-left: 18px; font-size:var(--fs-4); color: var(--ink-2); }
.of-trail li { margin: 5px 0; line-height: 1.6; }
.of-rej {
  margin-top: 9px; background: var(--danger-bg); border: 1px solid #F7C9C9;
  border-radius: 9px; padding: 8px 12px; font-size:var(--fs-3); color: #A52A2A;
}
.of-rej b { margin-right: 7px; }

/* 文档预览：白纸 + 浅灰底 */
.of-doc-wrap {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; margin: 10px 0; max-height: 46vh; overflow: auto;
}
.of-doc-wrap .offer-doc { background: #fff; border-radius: 8px; box-shadow: var(--shadow-sm); }
.of-mail { margin-top: 12px; }
.of-mail-hd { font-size:var(--fs-3); font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.of-mail-bd {
  margin: 0; background: var(--line-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 13px; font-size:var(--fs-3); line-height: 1.75; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word; font-family: inherit; max-height: 26vh; overflow: auto;
}

/* =====================================================================
   批次 E：3.6 招聘分析（an-*）
   ===================================================================== */
.an-card { margin-bottom: 16px; }
.an-funnel { margin: 4px 0 14px; }
.an-fr {
  display: grid; grid-template-columns: 118px 1fr 132px 62px;
  gap: 10px; align-items: center; padding: 5px 0;
}
.an-fr-n { font-size:var(--fs-3); color: var(--ink-2); font-weight: 600; text-align: right; }
.an-fr-bar { height: 18px; background: var(--line-2); border-radius: 20px; overflow: hidden; }
.an-fr-bar span {
  display: block; height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand));
  transition: width 0.5s ease;
}
.an-fr-v { font-size:var(--fs-3); color: var(--ink-2); white-space: nowrap; }
.an-fr-v b { color: var(--ink); font-size:var(--fs-5); }
.an-fr-c { font-size:var(--fs-3); font-weight: 700; color: var(--brand-700); text-align: right; }

.an-cyc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.an-cyc-i {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; text-align: center;
}
.an-cyc-v { font-size:var(--fs-8); font-weight: 700; color: var(--brand-700); line-height: 1.25; }
.an-cyc-v small { font-size:var(--fs-3); font-weight: 500; color: var(--muted); }
.an-cyc-k { font-size:var(--fs-3); color: var(--muted); margin-top: 4px; }

@media (max-width: 860px) {
  .an-fr { grid-template-columns: 100px 1fr 66px; }
  .an-fr-v { display: none; }
  .an-cyc { grid-template-columns: 1fr; }
  .of-kv { grid-template-columns: 96px 1fr; }
}

/* ============================================================
   综合管理工作台（系统框架一级入口）
   Generic Management Workbench — tasks · workflow · notices · reports
   ============================================================ */
.wb-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.wb-hero-t { flex: 1; min-width: 0; }
.wb-hero-t b { display: block; font-size:var(--fs-6); font-weight: 720; letter-spacing: -0.01em; }
.wb-hero-t span { display: block; font-size:var(--fs-3); color: var(--muted); margin-top: 3px; }

.wb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* 可点击 KPI 卡：原来与「纯数据展示卡」完全同款 → 看不出能点进去。
   补「阴影 + 上浮 + 橙色描边」三重线索，让可进入的卡自己说话。 */
.wb-kpis .kpi { cursor: pointer; text-align: left; font-family: inherit; transition: all 0.13s; box-shadow: var(--shadow-sm); }
.wb-kpis .kpi:hover {
  border-color: var(--brand-300); box-shadow: var(--shadow); transform: translateY(-1px);
}
.wb-kpis .kpi .kv { font-size:var(--fs-9); font-weight: 760; letter-spacing: -0.03em; line-height: 1.1; }
.wb-kpis .kpi .kl { font-size:var(--fs-3); color: var(--muted); font-weight: 550; margin-top: 5px; }

.wb-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.wb-list { padding: 2px 0 6px; }
.wb-li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 18px; cursor: pointer; }
.wb-li:hover { background: var(--line-2); }
.wb-li .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); margin-top: 6px; flex: 0 0 7px; }
.wb-li .dot.warn { background: var(--warn); }
.wb-li.unread .dot { background: var(--brand); }
.wb-li > div { min-width: 0; }
.wb-li b { display: block; font-size:var(--fs-4); font-weight: 620; }
.wb-li span { display: block; font-size:var(--fs-3); color: var(--muted); margin-top: 2px; }

.wb-sc { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; padding: 16px 18px; }
.wb-sc-i {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); cursor: pointer; font-family: inherit;
  font-size:var(--fs-3); color: var(--ink-2); font-weight: 550; text-align: center; transition: all 0.13s;
}
.wb-sc-i:hover { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-700); }
.wb-sc-i svg { width: 19px; height: 19px; stroke: currentColor; opacity: 0.85; }

/* 嵌入工作台的子视图：页签弱化为次级样式 */
.wb-embed .vtabs { margin-bottom: 12px; }
.wb-embed .vtabs button { padding: 6px 12px; font-size:var(--fs-3); }

/* ============================================================
   业务职能域占位页（采购 / 库存 / 行政 / 法务 / IT）
   ============================================================ */
.soon { max-width: 760px; }
.soon-hero { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.soon-ico {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: var(--r-lg);
  background: var(--brand-50); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
}
.soon-ico svg { width: 26px; height: 26px; stroke: currentColor; }
.soon-t { min-width: 0; }
.soon-t h2 { font-size:var(--fs-7); font-weight: 750; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.soon-t p { font-size:var(--fs-4); color: var(--muted); margin-top: 6px; line-height: 1.6; }
.soon-badge {
  font-style: normal; font-size:var(--fs-1); font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px; background: var(--warn-bg); color: var(--warn);
}
.soon-list { list-style: none; padding: 6px 0; margin: 0; }
.soon-list li { display: flex; align-items: center; gap: 11px; padding: 11px 18px; font-size:var(--fs-5); color: var(--ink-2); }
.soon-list li + li { border-top: 1px solid var(--line-2); }
.soon-list i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-300); flex: 0 0 7px; }
.soon-tip {
  margin-top: 16px; padding: 13px 16px; border-radius: var(--r);
  background: var(--brand-50); color: var(--brand-800); font-size:var(--fs-3); line-height: 1.65;
}

@media (max-width: 860px) {
  .wb-grid { grid-template-columns: 1fr; }
  .soon-hero { flex-direction: column; gap: 12px; }
}

/* ============================================================
   ② 数据密度切换（舒适 / 紧凑）
   默认舒适。给 .app 加一个 density-compact 类名即整站切换 ——
   同样是纯样式，不触碰任何 JS 逻辑或业务数据。
   需要同屏核对大量行时（如薪酬核算、考勤明细）一键收紧。
   ============================================================ */
.density-compact .view { padding: 18px 24px 60px; }
.density-compact table.tbl th { padding: 8px 12px; }
.density-compact table.tbl td { padding: 7px 12px; }
.density-compact .card-hd { padding: 11px 16px; }
.density-compact .card-bd { padding: 14px 16px; }
.density-compact .kpi { padding: 13px 16px; }
.density-compact .kpi .k-val { font-size:var(--fs-9); }
.density-compact .kpi::before { top: 12px; height: 22px; }
.density-compact .wb-li { padding: 7px 18px; }
.density-compact .soon-list li { padding: 8px 18px; }
.density-compact .msg-item { padding: 8px 10px; }
.density-compact .inbox-row { padding: 4px 2px; }
.density-compact .iv-col { min-height: 136px; }

/* 密度开关控件（工具栏 / 原型演示用） */
.dsw {
  display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-2); padding: 2px; gap: 2px;
}
.dsw button {
  border: 0; background: transparent; padding: 5px 11px; border-radius: var(--r-xs);
  font-size:var(--fs-3); font-weight: 650; color: var(--muted); cursor: pointer; font-family: inherit;
  transition: background var(--t-fast) var(--ease-io), color var(--t-fast) var(--ease-io);
  display: inline-flex; align-items: center; gap: 5px;
}
.dsw button.active { background: #fff; color: var(--brand-700); box-shadow: var(--shadow-sm); }
.dsw button:not(.active):hover { background: var(--line-2); color: var(--ink); }
.dsw svg { width: 14px; height: 14px; stroke: currentColor; }

/* ============================================================
   ③ 加载骨架屏（Loading Skeleton）
   取数时先用灰块占位，避免「白屏 → 突然跳出内容」的跳动感。
   形状与实际内容一致，加载完成后无位移。
   ============================================================ */
.sk {
  background: linear-gradient(90deg, var(--line-2) 25%, #E9EDF2 37%, var(--line-2) 63%);
  background-size: 400% 100%;
  animation: skShine 1.5s ease infinite;
  border-radius: var(--r-xs);
}
.sk-line { height: 11px; margin-bottom: 9px; }
.sk-line:last-child { margin-bottom: 0; }
.sk-w20 { width: 20%; } .sk-w30 { width: 30%; } .sk-w40 { width: 40%; }
.sk-w50 { width: 50%; } .sk-w60 { width: 60%; } .sk-w80 { width: 80%; }
.sk-block { height: 62px; border-radius: var(--r); }
.sk-kpi { height: 92px; border-radius: var(--r-lg); }
.sk-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; }
.sk-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.sk-row > .sk:last-child { margin-left: auto; flex: 0 0 90px; }

/* ============================================================
   ④ 移动端：还原图标条，保持抽屉完整（小屏没有多余宽度可省）
   ============================================================ */
@media (max-width: 820px) {
  .app.rail .sb-brand { justify-content: flex-start; padding: 20px 18px 18px; }
  .app.rail .sb-brand .txt { display: block; }
  .app.rail .sb-group-hd { justify-content: flex-start; padding: 9px 12px 9px 14px; }
  .app.rail .sb-group-hd > span { display: block; }
  .app.rail .sb-group-hd .sb-caret { display: block; }
  .app.rail .sb-group-bd::before { display: block; }
  .app.rail .sb-group-bd .nav-item { padding-left: 43px; }
  .app.rail .nav-item { justify-content: flex-start; padding: 9px 12px 9px 14px; gap: 10px; }
  .app.rail .nav-item .nav-soon { display: inline-block; }
  .app.rail .sb-user { justify-content: flex-start; padding: 14px; }
  .app.rail .sb-user .info { display: block; }
  .rail-btn { display: none !important; }
  .topbar h1 { font-size:var(--fs-7); }
  .view { padding: 18px 16px 60px; }
}

/* ============================================================
   ⑤ 细节打磨
   ============================================================ */

/* 分区标题：左侧一道短橙刻度，全站统一的「这里开始一个新话题」信号 */
.sec-title { display: flex; align-items: center; font-size:var(--fs-5); font-weight: 700; color: var(--ink); margin: 0 0 13px; }
.sec-title::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px;
  background: var(--brand); margin-right: 9px; flex: 0 0 3px;
}
.sec-title .spacer { flex: 1; }

/* 可点击的列表项：统一 hover 反馈与过渡，不再是「有的动有的不动」 */
.wb-sc-i, .kb-card, .rec-item, .msg-item, .chip, .rep-chip, .step-chip, .iv-opin-btn, .iv-user {
  transition: background var(--t-fast) var(--ease-io), border-color var(--t-fast) var(--ease-io),
              color var(--t-fast) var(--ease-io), box-shadow var(--t-fast) var(--ease-io),
              transform var(--t-fast) var(--ease-io);
}
.wb-sc-i:active, .kb-card:active, .step-chip:active { transform: translateY(0.5px); }

/* 表格内的行内控件（预览表编辑）对齐更稳 */
.tbl td > .input, .tbl td > .select { padding: 6px 9px; font-size:var(--fs-3); }

/* 长文本与数字：金额、天数、人数一律等宽，纵向逐位对齐 */
.an-fr-v b, .hc-line span b, .prog-txt, .pv, .k-val, .iv-c-t, .of-tl-i, .vt-n, .sc-n {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   批次②：2.1 入职信息采集
   A. 免登录采集页 onboard.html（手机优先）
   B. 主应用：二维码弹窗与采集状态
   ============================================================ */

/* ---------- A. 免登录采集页 ---------- */
.ob-page { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.ob-top {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 5;
}
.ob-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ob-brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.ob-brand-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ob-brand-txt b { font-size:var(--fs-5); font-weight: 500; color: var(--ink); }
.ob-brand-txt span { font-size:var(--fs-3); color: var(--muted); }
.ob-top .lang-toggle { margin-left: auto; }

.ob-main { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 16px 16px 32px; }

.ob-hero { padding: 4px 2px 12px; }
.ob-hero h2 { font-size:var(--fs-7); font-weight: 500; color: var(--ink); margin: 0 0 6px; }
.ob-hero p { font-size:var(--fs-4); color: var(--muted); margin: 0; line-height: 1.6; }

.ob-tip {
  font-size:var(--fs-3); color: var(--brand-700); background: var(--brand-50);
  border: 1px solid var(--brand-200); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 14px; line-height: 1.6;
}
.ob-alert { border-radius: 10px; padding: 11px 13px; margin-bottom: 14px; font-size:var(--fs-4); line-height: 1.6; }
.ob-alert.warn { background: var(--warn-bg); border: 1px solid #EBD9AE; color: var(--warn); }
.ob-alert.warn b { display: block; margin-bottom: 3px; font-weight: 500; }

.ob-sec { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 4px; margin-bottom: 12px; }
.ob-sec h3 {
  font-size:var(--fs-3); font-weight: 500; color: var(--ink-2); margin: 0 0 12px;
  padding-left: 9px; position: relative;
}
.ob-sec h3::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 3px; height: 13px;
  border-radius: 2px; background: var(--brand);
}
.ob-grid { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.ob-field { margin-bottom: 12px; min-width: 0; }
.ob-field .label { display: block; font-size:var(--fs-3); color: var(--ink-2); margin-bottom: 5px; }
.ob-field .req { color: var(--danger); margin-left: 3px; }
.ob-field .input, .ob-field .select { width: 100%; }

.ob-foot { font-size:var(--fs-3); color: var(--muted); line-height: 1.6; text-align: center; padding: 14px 2px 4px; }
.ob-bottom { text-align: center; font-size:var(--fs-3); color: var(--faint); padding: 14px; }

.ob-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 0; color: var(--muted); font-size:var(--fs-4); }

.ob-center { padding: 36px 0; display: flex; justify-content: center; }
.ob-state {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 22px; text-align: center; max-width: 420px; width: 100%;
}
.ob-state .ob-ico {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; font-size:var(--fs-8); font-weight: 500;
}
.ob-state.ok .ob-ico { background: var(--ok-bg); color: var(--ok); }
.ob-state.warn .ob-ico { background: var(--warn-bg); color: var(--warn); }
.ob-state h2 { font-size:var(--fs-6); font-weight: 500; color: var(--ink); margin: 0 0 8px; }
.ob-state p { font-size:var(--fs-4); color: var(--muted); line-height: 1.65; margin: 0; }
.ob-state .ob-meta { margin-top: 12px; font-size:var(--fs-3); color: var(--ink-2); }

@media (min-width: 560px) {
  .ob-grid { grid-template-columns: 1fr 1fr; }
  .ob-field.full { grid-column: 1 / -1; }
}

/* ---------- B. 二维码弹窗 ---------- */
.qr-wrap { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.qr-box {
  flex: 0 0 auto; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; line-height: 0;
}
.qr-box svg { display: block; width: 200px; height: 200px; }
.qr-side { flex: 1 1 240px; min-width: 210px; }
.qr-side .qr-k { font-size:var(--fs-3); color: var(--muted); margin-bottom: 5px; }
.qr-side .qr-link {
  display: block; width: 100%; font-size:var(--fs-3); font-family: var(--font-mono, monospace);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; color: var(--ink-2); word-break: break-all; line-height: 1.5;
  max-height: 78px; overflow: auto;
}
.qr-side .qr-meta { margin-top: 10px; font-size:var(--fs-3); color: var(--muted); line-height: 1.7; }
.qr-side .qr-acts { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.qr-empty {
  padding: 22px 4px; text-align: center; color: var(--muted); font-size:var(--fs-4); line-height: 1.7;
}

/* ---------- 采集状态徽章（视图内局部映射，不改全局 STATUS_TONE） ---------- */
.ob-st-none      { background: var(--gray-bg);   color: var(--gray); }
.ob-st-sent      { background: var(--info-bg);   color: var(--info); }
.ob-st-submitted { background: var(--warn-bg);   color: var(--warn); }
.ob-st-approved  { background: var(--ok-bg);     color: var(--ok); }
.ob-st-rejected  { background: var(--danger-bg); color: var(--danger); }
.ob-st-expired   { background: var(--gray-bg);   color: var(--gray); }

/* 采集数据对照表 */
.ob-kv { display: grid; grid-template-columns: 1fr; gap: 0; }
.ob-kv-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size:var(--fs-3); }
.ob-kv-row:last-child { border-bottom: 0; }
.ob-kv-row .k { flex: 0 0 40%; color: var(--muted); }
.ob-kv-row .v { flex: 1; color: var(--ink); word-break: break-word; }
.ob-kv-sec { font-size:var(--fs-3); font-weight: 500; color: var(--ink-2); padding: 12px 0 5px; border-bottom: 1px solid var(--line); }
.ob-docs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ob-doc-i {
  display: flex; align-items: center; gap: 8px; font-size:var(--fs-3);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
}
.ob-doc-i .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }

/* ===== 批次③：IT 办理（账号三件套 + 硬件发放清单） ===== */
.it-arow {
  display: grid;
  grid-template-columns: 132px 1fr 1fr 1fr 150px 140px auto;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.it-arow .select, .it-arow .input { min-width: 0; }
@media (max-width: 1100px) {
  .it-arow { grid-template-columns: 1fr 1fr 1fr; }
  .it-arow [data-a="given_at"], .it-arow [data-a="given_by"] { grid-column: span 1; }
}
@media (max-width: 620px) {
  .it-arow { grid-template-columns: 1fr 1fr; }
}


/* ===== 批次⑥：离职五路并行交接单 ===== */
/* 序号徽标（① ② ③ …）与元信息行；不引入新配色，全部复用既有语义令牌 */
.obc-seq {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand-700);
  font-size:var(--fs-3); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.obc-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size:var(--fs-3); color: var(--muted); margin: 0 0 10px;
}
.obc-meta b { color: var(--ink-2); font-weight: 600; }
.sub-block .check-list + .field { margin-top: 10px; }

/* 工作台「我的离职与交接」卡片 */
.wb-obc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size:var(--fs-3); color: var(--ink-2); margin-bottom: 10px;
}
.wb-obc .spacer { flex: 1; }
.wb-obc + .wb-list { margin-top: 4px; }


/* ===== 批次⑦：人员黑名单 + 离职分析 ===== */
/* 工具条内联标签（离职分析日期区间） */
.toolbar .lb-inline { font-size:var(--fs-3); color: var(--ink-2); white-space: nowrap; margin: 0 2px 0 6px; }
.toolbar input[type="date"].input { width: 148px; }

/* 黑名单原因列：过长时收敛，避免撑破表格 */
.tbl .bl-reason { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 离职分析：分块 + 横向条形（纯 CSS，无图表库） */
.ana-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}
.ana-blk {
  border: 1px solid var(--line); border-radius: var(--r, 10px);
  background: var(--card, #fff); padding: 14px 16px 10px;
}
.ana-hd {
  font-size:var(--fs-4); font-weight: 650; color: var(--ink);
  margin-bottom: 10px; padding-left: 9px; position: relative;
}
.ana-hd::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 3px; height: 12px; border-radius: 2px; background: var(--brand-600, #EF7F17);
}
.ana-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.ana-lb {
  flex: 0 0 108px; max-width: 108px; font-size:var(--fs-3); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ana-bar { flex: 1; height: 9px; border-radius: 5px; background: var(--brand-50, #FDF1E4); overflow: hidden; }
.ana-fill { height: 100%; border-radius: 5px; background: var(--brand-600, #EF7F17); }
.ana-n { flex: 0 0 34px; text-align: right; font-size:var(--fs-3); font-variant-numeric: tabular-nums; color: var(--ink); }
.ana-empty { font-size:var(--fs-3); color: var(--muted); padding: 6px 0 8px; }

/* ===== 模块 1.1 组织架构图（纯 CSS，无外部依赖） ===== */
.og-wrap { overflow-x: auto; padding: 6px 2px 10px; }
.og-row { display: flex; align-items: stretch; margin-bottom: 7px; }
.og-ind { flex: 0 0 auto; position: relative; }
.og-ind::before {
  content: ''; position: absolute; left: 10px; top: -7px; bottom: 50%;
  border-left: 1px dashed var(--line, #DFE5EC);
}
.og-ind::after {
  content: ''; position: absolute; left: 10px; top: 50%;
  width: 12px; border-top: 1px dashed var(--line, #DFE5EC);
}
.og-card {
  flex: 1 1 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line, #DFE5EC); border-left-width: 3px; border-radius: 10px;
  background: var(--card, #fff); padding: 8px 12px; min-width: 430px;
  border-left-color: var(--brand-600, #EF7F17);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.og-card.lv0 { border-left-color: #B4560A; }
.og-card.lv1 { border-left-color: var(--brand-600, #EF7F17); }
.og-card.lv2 { border-left-color: #F2A65A; }
.og-card.is-off { opacity: .55; }
.og-card.is-over { background: #FEF3F2; border-color: #EFC7C3; }
.og-card.is-under { background: #FFFBF3; border-color: #F0DCC0; }
.og-nm { font-weight: 650; font-size:var(--fs-5); color: var(--ink, #1F2937); }
.og-cd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--fs-3);
  color: var(--ink-2, #4B5563); background: var(--line-2, #F4F6F8);
  padding: 1px 6px; border-radius: 4px;
}
.og-ld { font-size:var(--fs-3); color: var(--ink-2, #4B5563); }
.og-sp { flex: 1 1 auto; }
.og-hc { display: flex; gap: 8px; font-size:var(--fs-3); font-variant-numeric: tabular-nums; color: var(--ink-2, #4B5563); }
.og-hc b { color: var(--ink, #1F2937); }
.og-hc .over { color: #C0392B; font-weight: 700; }
.og-hc .under { color: #B4560A; font-weight: 700; }
.og-badge {
  font-size:var(--fs-3); padding: 1px 7px; border-radius: 999px;
  background: var(--brand-50, #FDF1E4); color: #B4560A; border: 1px solid #F3D7B7;
}
.og-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size:var(--fs-3); color: var(--ink-2, #4B5563); margin-bottom: 10px; }
.og-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ===== 模块 1.4 职级矩阵（16 级 × 4 序列） ===== */
.gm-tbl th, .gm-tbl td { text-align: center; }
.gm-tbl .gm-lv {
  font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--line-2, #F4F6F8); color: var(--ink, #1F2937);
}
.gm-cell { font-size:var(--fs-3); line-height: 1.35; padding: 6px 4px; }
.gm-cell b { display: block; font-weight: 650; color: var(--ink, #1F2937); }
.gm-cell span { display: block; font-size:var(--fs-1); color: var(--muted, #8A94A6); }
.gm-cell.empty { color: #C6CDD6; }
.gm-cell.hi { background: var(--brand-50, #FDF1E4); }
.gm-cell.hi b { color: #B4560A; }

/* ===== 组织调整时间线 ===== */
.tl { position: relative; padding-left: 20px; }
.tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; border-left: 2px solid var(--line, #DFE5EC); }
.tl-item { position: relative; padding: 0 0 14px; }
.tl-item::before {
  content: ''; position: absolute; left: -19px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--brand-600, #EF7F17); border: 2px solid #fff;
}
.tl-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.tl-nm { font-weight: 650; font-size:var(--fs-4); color: var(--ink, #1F2937); }
.tl-tm { font-size:var(--fs-3); color: var(--muted, #8A94A6); font-variant-numeric: tabular-nums; }
.tl-bd { font-size:var(--fs-3); color: var(--ink-2, #4B5563); line-height: 1.6; }

/* ============================================================
   图形化呈现（2026-10-09）
     A. 组织架构图 · 树形连线图（SVG 贝塞尔连线 + 绝对定位卡片）
     B. 职级云梯（16 级 × 4 序列色块墙）+ 序列跨度条
   纪律：白底 + 品牌橙 + 冷灰；文字一律深色达标；不引入暗色块。
   ============================================================ */

/* ---- 序列配色令牌（局部，不改全局 STATUS_TONE） ---- */
.sq-mg { --sq: #EF7F17; --sq-bg: #FFF7ED; --sq-ink: #B4560A; --sq-bd: #FDD8A8; }
.sq-sl { --sq: #3B82F6; --sq-bg: #EAF2FE; --sq-ink: #1D4ED8; --sq-bd: #BFD8FB; }
.sq-pr { --sq: #8B5CF6; --sq-bg: #F4EFFE; --sq-ink: #6D28D9; --sq-bd: #DCCEFB; }
.sq-op { --sq: #14B8A6; --sq-bg: #E7F7F5; --sq-ink: #0F766E; --sq-bd: #B7E9E3; }

/* ---- 分段切换器（视图切换 / 折叠层级） ---- */
.vseg {
  display: inline-flex; background: var(--card); border: 1px solid #DFE5EC;
  border-radius: 999px; overflow: hidden; box-shadow: var(--shadow-sm);
  /* 评审 D-01：禁止被弹性布局压缩（防止选项被 overflow:hidden 裁切） */
  flex: 0 0 auto;
}
.vseg button {
  border: 0; background: transparent; padding: 6px 14px; font-family: inherit;
  font-size:var(--fs-3); font-weight: 620; color: var(--ink-2); cursor: pointer;
  white-space: nowrap; transition: background var(--t-fast), color var(--t-fast);
}
.vseg button:not(.active):hover { background: var(--brand-50); color: var(--brand-700); }
.vseg button.active { background: var(--brand); color: #fff; box-shadow: inset 0 0 0 1px var(--brand-600); }

/* ---- A. 组织架构树 ---- */
.oct-topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.oct-focus {
  display: inline-flex; align-items: center; gap: 8px; font-size:var(--fs-3); font-weight: 620;
  color: var(--brand-700); background: var(--brand-50); border: 1px solid #F3D7B7;
  border-radius: 999px; padding: 4px 6px 4px 13px;
}
.oct-focus button {
  border: 0; background: #fff; color: var(--brand-700); font-family: inherit; font-size:var(--fs-3);
  font-weight: 620; border-radius: 999px; padding: 2px 9px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.oct-focus button:hover { background: var(--brand-100); }

.oct-wrap {
  position: relative; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 16px 26px; background-color: var(--bg-2);
  background-image: radial-gradient(circle, #E4E9EF 1px, transparent 1px);
  background-size: 18px 18px;
}
/* 画布：margin 用 0 而不是 auto —— 在 overflow 容器里 auto 居中会让左侧内容滚不到；
   min-width:100% 保证树比容器窄时仍然铺满（网格背景不中断）。 */
.oct-canvas { position: relative; margin: 0; min-width: 100%; }
.oct-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.oct-link { fill: none; stroke: #CBD5E1; stroke-width: 1.6; }
.oct-link.on { stroke: var(--brand); stroke-width: 2.4; }
.oct-node {
  position: absolute; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 12px 11px 9px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}
/* 竖向排版：层级色带改到卡片顶边 */
.oct-node::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--brand); border-radius: var(--r) var(--r) 0 0;
}
.oct-node.lv0::before { background: #B4560A; }
.oct-node.lv1::before { background: var(--brand); }
.oct-node.lv2::before { background: #F2A65A; }
.oct-node.lv3::before { background: #F7C99A; }
.oct-node:hover {
  transform: translateY(-1px); border-color: #F3D7B7;
  box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 24px -12px rgba(16, 24, 40, .3);
}
.oct-node.is-off { opacity: .5; }
.oct-node.is-over { background: #FEF3F2; border-color: #EFC7C3; }
.oct-node.is-under { background: #FFFBF3; border-color: #F0DCC0; }
.oct-node.is-dim { opacity: .3; }
.oct-node.is-focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(239, 127, 23, .18), 0 10px 22px -12px rgba(16, 24, 40, .3); }
/* 标题行：名称独占（角色徽标已移到副行右侧），允许折行到两行，超出两行才省略 */
.oct-hd { display: flex; align-items: flex-start; gap: 5px; min-width: 0; line-height: 17px; }
.oct-nm {
  flex: 1 1 auto; min-width: 0;
  font-weight: 660; font-size:var(--fs-3); color: var(--ink);
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
/* 中文名一行、英文名一行：把内联副名改成块级，避免中英混排时英文被截在第二行 */
.oct-nm .bi-sub { display: block; font-weight: 500; font-size:var(--fs-1); color: var(--muted); opacity: .9; }
.oct-rl {
  flex: 0 0 auto; margin-left: auto; font-size:var(--fs-1); font-weight: 620; padding: 1px 5px;
  border-radius: 999px; background: var(--brand-50); color: var(--brand-700);
  border: 1px solid #F3D7B7; white-space: nowrap; line-height: 13px;
  align-self: center;
}
.oct-node.is-over .oct-rl { background: var(--danger-bg); color: var(--danger); border-color: #EFC7C3; }
/* 副行：编码 + 负责人 + 角色徽标。负责人必须可压缩（flex:1 1 auto + min-width:0），
   否则长名字会把徽标顶出卡片右边界（D4 的「压字」就是这么来的）。 */
.oct-sub {
  display: flex; align-items: center; gap: 6px; font-size:var(--fs-1); line-height: 14px;
  color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden;
}
.oct-cd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--fs-1);
  color: var(--ink-2); background: var(--line-2); padding: 0 4px; border-radius: 4px;
  white-space: nowrap; flex: 0 0 auto;
}
.oct-leader { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.oct-hc {
  margin-top: 2px;
  display: flex; align-items: center; gap: 6px; font-size:var(--fs-3); line-height: 15px;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.oct-track { flex: 1 1 auto; min-width: 26px; height: 5px; border-radius: 5px; background: #EDF1F5; overflow: hidden; }
.oct-track i { display: block; height: 100%; border-radius: 5px; background: var(--brand); transition: width var(--t-slow) var(--ease); }
.oct-node.is-over .oct-track i { background: var(--danger); }
.oct-node.is-under .oct-track i { background: #F2A65A; }
.oct-hc b { font-weight: 700; color: var(--ink); }
.oct-hc b.over { color: var(--danger); }
.oct-hc b.under { color: var(--brand-700); }
/* 展开按钮：竖向排版时挂在卡片底边中心（父级绝不能 overflow:hidden） */
.oct-more {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 2;
  height: 20px; min-width: 20px; padding: 0 5px; border-radius: 999px;
  border: 1px solid #F3D7B7; background: #fff;
  color: var(--brand-700); font-family: inherit; font-size:var(--fs-1); font-weight: 700;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-sm);
}
.oct-more:hover { background: var(--brand-50); }
.oct-empty { padding: 30px 0; text-align: center; color: var(--muted); font-size:var(--fs-4); }

/* ---- 折叠卡（保留旧视图，默认收起） ---- */
.fold-bd { display: none; }
.foldcard.is-open .fold-bd { display: block; }
.fold-tg {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
  font-size:var(--fs-3); font-weight: 620; color: var(--brand-700); background: var(--brand-50);
  border: 1px solid #F3D7B7; border-radius: 999px; padding: 3px 12px; cursor: pointer;
}
.fold-tg:hover { background: var(--brand-100); }
.fold-tg .cv { font-size:var(--fs-1); display: inline-block; transition: transform var(--t) var(--ease); }
.foldcard.is-open .fold-tg .cv { transform: rotate(180deg); }

/* ---- B. 职级云梯 ---- */
.lad-wrap { overflow-x: auto; padding: 2px 1px 6px; }
.lad { display: grid; grid-template-columns: 52px repeat(4, minmax(128px, 1fr)); gap: 6px; min-width: 620px; }
.lad-col {
  text-align: center; padding: 7px 8px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--sq-bg); color: var(--sq-ink); border: 1px solid var(--sq-bd);
  border-bottom: 2px solid var(--sq);
}
.lad-col b { font-size:var(--fs-3); font-weight: 660; display: block; }
.lad-col span { font-size:var(--fs-1); font-weight: 500; color: var(--muted); }
.lad-scale {
  display: flex; align-items: center; justify-content: center; border-radius: 7px;
  font-size:var(--fs-3); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--bg-2); border: 1px solid var(--line);
}
.lad-scale.top { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-200); }
.lad-cell {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-height: 36px; padding: 5px 10px; border-radius: var(--r-sm);
  border: 1px solid transparent; transition: transform var(--t) var(--ease);
}
.lad-cell.on { background: var(--sq-bg); border-color: var(--sq-bd); box-shadow: inset 3px 0 0 var(--sq); }
.lad-cell.on b { font-size:var(--fs-3); font-weight: 650; color: var(--sq-ink); }
.lad-cell.on span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--fs-1); color: var(--muted); }
.lad-cell.off { border: 1px dashed #E3E8EE; background: #FCFDFE; }
.lad-cell.off em { font-style: normal; font-size:var(--fs-1); color: #C6CDD6; text-align: center; }
.lad-cell:hover { transform: translateX(2px); }

/* ---- B2. 序列跨度条 ---- */
.span-list { display: flex; flex-direction: column; gap: 9px; }
.span-row { display: flex; align-items: center; gap: 12px; }
.span-nm {
  flex: 0 0 108px; display: flex; align-items: center; gap: 6px;
  font-size:var(--fs-3); font-weight: 650; color: var(--ink-2);
}
.span-nm i { width: 9px; height: 9px; border-radius: 3px; background: var(--sq); flex: 0 0 auto; }
.span-track {
  position: relative; flex: 1 1 auto; height: 26px; border-radius: 8px;
  background-color: var(--bg-2); border: 1px solid var(--line);
  background-image: repeating-linear-gradient(to right, #E9EDF2 0 1px, transparent 1px 6.25%);
}
.span-fill {
  position: absolute; top: 3px; bottom: 3px; border-radius: 6px; overflow: hidden;
  background: var(--sq); display: flex; align-items: center; justify-content: center;
  font-size:var(--fs-3); font-weight: 700; color: #fff; white-space: nowrap;
}
.span-rg {
  flex: 0 0 92px; text-align: right; font-size:var(--fs-3); font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.span-axis { display: flex; align-items: center; gap: 12px; margin-top: 1px; }
.span-axis .span-nm { visibility: hidden; }
.span-ticks { flex: 1 1 auto; display: flex; }
.span-ticks span { flex: 1 1 0; text-align: center; font-size:var(--fs-1); color: var(--faint); font-variant-numeric: tabular-nums; }
.span-ticks span.hi { color: var(--brand-700); font-weight: 700; }
.span-ticks span.hi::before { content: '·'; margin-right: 2px; }

/* ---- B3. 序列卡（带迷你跨度条） ---- */
.rep-chip2 {
  border: 1px solid var(--line); background: var(--card); border-radius: var(--r);
  padding: 11px 14px; min-width: 216px; flex: 1 1 216px;
  box-shadow: var(--shadow-sm); border-top: 3px solid var(--sq);
}
.rep-chip2 .rc-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.rep-chip2 .rc-hd i { width: 9px; height: 9px; border-radius: 3px; background: var(--sq); }
.rep-chip2 .rc-hd b { font-size:var(--fs-5); font-weight: 680; color: var(--ink); }
.rep-chip2 .rc-hd em { margin-left: auto; font-style: normal; font-size:var(--fs-3); font-weight: 700; color: var(--sq-ink); }
.rep-chip2 .rc-meta { font-size:var(--fs-3); color: var(--muted); margin-bottom: 8px; }
.rep-chip2 .rc-mini {
  position: relative; height: 9px; border-radius: 5px; background: #F1F4F7;
  background-image: repeating-linear-gradient(to right, #E4E9EF 0 1px, transparent 1px 6.25%);
  overflow: hidden;
}
.rep-chip2 .rc-mini span { position: absolute; top: 1px; bottom: 1px; border-radius: 4px; background: var(--sq); }
.rep-chip2 .rc-ft { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size:var(--fs-3); color: var(--muted); }
.rep-chip2 .rc-ft .spacer { flex: 1; }

/* ================= 模块 3 · 采购与库存（2026-10-09） ================= */
/* 单据行编辑器（采购订单 / 出入库单共用） */
/* 明细行（评审批次 D-02）：网格布局 + 表头，杜绝输入框被压扁。
   三套模板：订单 po-line-po / 入库 po-line-in / 出库 po-line-out，
   表头与数据行共用同一模板保证列对齐；容器横向滚动兜底。 */
.po-lines-wrap { overflow-x: auto; padding-bottom: 2px; }
.po-line { display: grid; gap: 6px; align-items: center; margin-bottom: 6px; }
.po-line .select, .po-line .input { padding: 5px 8px; font-size:var(--fs-3); min-width: 0; width: 100%; }
.po-line-po  { grid-template-columns: 122px minmax(110px, 1fr) 70px 46px 64px 60px 76px 30px; }
.po-line-in  { grid-template-columns: 112px minmax(100px, 1fr) 62px 40px 56px 56px 56px 60px 92px 52px 84px 84px 30px; }
.po-line-out { grid-template-columns: 122px minmax(110px, 1fr) 70px 46px 64px 64px 70px 52px 30px; }
.po-line-hd { margin-bottom: 5px; padding: 0 2px; }
.po-line-hd > span { font-size:var(--fs-2); font-weight: 650; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v92 · 收货进度 */
.po-prog { margin: 8px 0 2px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fcfdfe; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-chip { border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; min-width: 72px; background: #fff; }
.pg-chip span { display: block; font-size:var(--fs-1); color: var(--muted); line-height: 1.4; }
.pg-chip b { font-size:var(--fs-6); line-height: 1.3; }
.pg-chip.ok b { color: var(--ok); }
.pg-chip.warn b { color: var(--warn); }
.pg-chip.bad b { color: var(--danger); }
.pg-bar { height: 6px; border-radius: 99px; background: var(--line-2); margin-top: 10px; overflow: hidden; }
.pg-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .3s; }
.pg-pct { font-size:var(--fs-2); color: var(--muted); text-align: right; margin-top: 3px; }
.po-line .icon-btn { width: 26px; height: 26px; font-size:var(--fs-6); justify-self: center; }
.po-line [data-f="amount"], .po-line [data-f="avail"] {
  text-align: right; font-variant-numeric: tabular-nums; font-size:var(--fs-3);
  color: var(--ink-2); white-space: nowrap;
}
/* 审批链状态胶囊 */
.pr-chain { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-chain .st { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font-size:var(--fs-3); background: #fff; }
.pr-chain .st.ok { border-color: #C7E9D5; background: #ECFDF3; color: #067647; }
.pr-chain .st.cur { border-color: #F3D7B7; background: var(--brand-50); color: var(--brand-700); font-weight: 700; }
.pr-chain .st.wait { color: var(--muted); }
/* 横条分布图 */
.bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size:var(--fs-3); }
.bar-row .nm { width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .tr { flex: 1 1 auto; height: 8px; border-radius: 5px; background: #EDF1F5; overflow: hidden; }
.bar-row .tr i { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.bar-row .vv { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }

/* ================= 模块 3 · 采购与库存 —— 评审批次B（2026-10-10） ================= */
/* 迷你主操作按钮（列表行内） */
.btn-mini { padding: 4px 11px; font-size:var(--fs-3); border-radius: 7px; gap: 4px; line-height: 1.35; }
/* ⋯ 操作菜单触发按钮 */
.kb-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; vertical-align: middle;
  border: 1px solid var(--line); background: #fff; border-radius: 7px;
  color: var(--ink-2); cursor: pointer; font-size:var(--fs-6); line-height: 1;
  font-weight: 700; transition: background var(--t-fast) var(--ease-io), border-color var(--t-fast) var(--ease-io);
}
.kb-trigger:hover { background: var(--line-2); border-color: #8E99A6; }
/* 行内操作菜单（fixed 挂 body，防裁切） */
.row-menu {
  position: fixed; z-index: 700; min-width: 148px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 5px;
}
.rm-it {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  font-family: inherit; font-size:var(--fs-4); font-weight: 550; color: var(--ink-2);
  padding: 7px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.rm-it:hover { background: var(--line-2); }
.rm-it.danger { color: var(--danger); }
.rm-it.danger:hover { background: var(--danger-bg); }
/* 合同 30 天内到期行：左侧红色色带 */
.tbl tr.ct-due td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
/* 合同汇总条 */
.ct-sum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 18px; border-bottom: 1px solid var(--line-2); font-size:var(--fs-3); color: var(--muted); }
.ct-sum b { font-variant-numeric: tabular-nums; }
/* 近效期倒计时徽章组合 */
.iv-near-date { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* 分段筛选（状态）内的计数 */
.vseg button .ct { font-weight: 500; opacity: .72; font-variant-numeric: tabular-nums; margin-left: 2px; }
.vseg button.active .ct { opacity: .92; }
/* 卡片头内的行内说明（防挤换行） */
.card-hd .hd-note { font-size:var(--fs-3); color: var(--muted); font-weight: 400; }

/* ================= 模块 3 · 采购与库存 —— 评审批次C（2026-10-10） ================= */
/* 三段堆叠条：已执行（橙）/ 在途（琥珀）/ 超支（红）；浅轨 = 可用 */
.mixbar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: #E8EDF2; min-width: 88px; }
.mixbar i { display: block; height: 100%; }
.mixbar .mb-ex { background: var(--brand); }
.mixbar .mb-fl { background: #F0B269; }
.mixbar .mb-ov { background: var(--danger); }
.tbl tr.row-over td { background: #FEF5F3; }
.tbl tr.row-over:hover td { background: #FCEDEB; }
/* 补货水位条：红区（低于安全）/ 黄区（低于补货点）/ 绿区（正常）+ 游标 */
.waterbar { position: relative; height: 10px; border-radius: 6px; min-width: 120px; background: #EDF1F5; }
.waterbar .wz { position: absolute; top: 0; height: 100%; }
.waterbar .z1 { background: #F6C7C1; border-radius: 6px 0 0 6px; }
.waterbar .z2 { background: #F7DFB4; }
.waterbar .z3 { background: #CDE8DA; border-radius: 0 6px 6px 0; }
.waterbar .wmk { position: absolute; top: -3px; width: 3px; height: 16px; background: var(--ink); border-radius: 2px; z-index: 1; }
/* 效期倒计时细条 */
.thinbar { height: 5px; border-radius: 4px; background: #EDF1F5; overflow: hidden; margin-top: 5px; min-width: 110px; }
.thinbar i { display: block; height: 100%; border-radius: 4px; }
/* 库存结构环图 + 图例 */
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { position: relative; width: 132px; height: 132px; flex: none; }
.donut svg { transform: rotate(-90deg); }
.donut .cen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.donut .cen b { font-size:var(--fs-6); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.donut .cen span { font-size:var(--fs-3); color: var(--muted); }
.dl-legend { display: flex; flex-direction: column; gap: 7px; min-width: 210px; flex: 1 1 210px; }
.dl-legend .li2 { display: flex; align-items: center; gap: 8px; font-size:var(--fs-3); }
.dl-legend .dot2 { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dl-legend .nm2 { flex: 1 1 auto; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-legend .vv2 { font-variant-numeric: tabular-nums; font-weight: 650; }
.dl-legend .pc2 { color: var(--muted); width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
/* 库龄分布柱 */
.agebars { display: flex; align-items: flex-end; gap: 16px; min-height: 156px; padding: 10px 4px 0; }
.agebars .ab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-height: 156px; }
.agebars .bar { width: 100%; max-width: 64px; border-radius: 8px 8px 4px 4px; background: var(--brand); min-height: 3px; }
.agebars .ab.b1 .bar { background: var(--brand); }
.agebars .ab.b2 .bar { background: #F7A94E; }
.agebars .ab.b3 .bar { background: #FBC98F; }
.agebars .ab.b4 .bar { background: #E2A69A; } /* 评审批次 F · D-12：90 天以上=呆滞风险 → 警示色（原浅灰语义相反） */
.agebars .vl { font-size:var(--fs-3); font-weight: 650; font-variant-numeric: tabular-nums; }
.agebars .lb { font-size:var(--fs-3); color: var(--muted); text-align: center; }
/* 空态 V2：图标 + 说明 + 动作 */
.empty-v2 { text-align: center; padding: 30px 16px; }
.empty-v2 .ic2 { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-50); border: 1px dashed #F3D7B7; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: var(--brand); }
.empty-v2 b { display: block; font-size:var(--fs-5); margin-bottom: 4px; }
.empty-v2 p { font-size:var(--fs-3); color: var(--muted); margin: 0 0 12px; }
.empty-v2 .acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* 骨架屏 */
.sk { padding: 4px 0; }
.sk-row { display: flex; gap: 12px; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--line-2); }
.sk-b { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line-2) 25%, #E9EDF2 37%, var(--line-2) 63%); background-size: 400% 100%; animation: skShine 1.5s ease infinite; }
@keyframes skShine { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk-b { animation: none; } }
/* 批量操作条 */
.batch-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 18px; border-bottom: 1px solid var(--line-2); background: var(--brand-50); font-size:var(--fs-3); }
.batch-bar b { font-variant-numeric: tabular-nums; }
.batch-bar .sp { flex: 1 1 auto; }
.tbl .ck-col { width: 34px; }
.tbl .ck { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
/* 公式说明折叠卡 */
/* v141：表单「高级字段」折叠区 —— 需求/订单表单默认只展示基础字段 */
.form-adv { margin: 14px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.form-adv > summary { cursor: pointer; padding: 9px 14px; font-size:var(--fs-3); font-weight: 650; color: var(--muted); list-style: none; }
.form-adv > summary::-webkit-details-marker { display: none; }
.form-adv > summary::before { content: '＋ '; color: var(--brand-600); font-weight: 700; }
.form-adv[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.form-adv[open] > summary::before { content: '－ '; }
.form-adv .form-grid { padding: 0 14px 12px; }
.formula-card { margin: 10px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.formula-card summary { cursor: pointer; padding: 9px 14px; font-size:var(--fs-3); font-weight: 650; color: var(--brand-700); list-style: none; }
.formula-card summary::-webkit-details-marker { display: none; }
.formula-card summary::before { content: '▸ '; }
.formula-card[open] summary::before { content: '▾ '; }
.formula-card .fb { padding: 0 14px 12px; font-size:var(--fs-3); color: var(--ink-2); line-height: 1.8; }
/* 触摸目标（平板 / 触屏）：关键控件 ≥36px */
@media (pointer: coarse) {
  .btn-mini { min-height: 36px; padding: 7px 13px; font-size:var(--fs-4); }
  .kb-trigger { width: 36px; height: 36px; font-size:var(--fs-7); }
  .vseg button { padding: 9px 15px; }
  .rm-it { padding: 10px 12px; font-size:var(--fs-5); }
}
/* 打印：单据核对（盘点 / 入库 / 出库详情） */
@media print {
  body > .app, body > #modal-root, .toast-root, .lang-toggle { display: none !important; }
  .modal-mask { position: static !important; inset: auto !important; background: none !important; padding: 0 !important; overflow: visible !important; }
  .modal-mask .modal { box-shadow: none !important; border: 0 !important; max-height: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; }
  .modal-mask .modal .modal-hd .icon-btn, .modal-mask .modal .modal-ft { display: none !important; }
  .modal-mask .modal .modal-bd { overflow: visible !important; padding: 0 !important; }
  .tbl-wrap { overflow: visible !important; }
  table.tbl th { position: static !important; }
  .po-line .icon-btn { display: none !important; }
}

/* ================= 模块 3 · 采购与库存 —— 评审批次 D/E/F（2026-10-10） ================= */
/* D-01 窄屏兜底：桌面端筛选栏「不压缩、整块换行」；≤900px 允许横向滑动查看全部选项 */
@media (max-width: 900px) {
  .vseg { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
}
/* D-05 品类树：一级行可折叠 + 箭头 + 层级底色 */
.cat-tbl td { padding-top: 9px; padding-bottom: 9px; }
tr.cat-l1 { cursor: pointer; }
tr.cat-l1 > td { font-weight: 650; background: var(--bg-2); }
tr.cat-l1:hover > td { background: var(--line-2); }
.cat-arrow { display: inline-block; width: 14px; margin-right: 2px; color: var(--muted); font-size:var(--fs-2); transition: transform var(--t-fast); }
tr.cat-l1.open .cat-arrow { transform: rotate(90deg); }
/* D-08 指标卡：长金额自适应字号（数字与单位保持同行，单位小字） */
.kpi .k-val { font-size:var(--fs-9); }
.kpi .k-val.k-mid { font-size:var(--fs-9); }
.kpi .k-val.k-long { font-size:var(--fs-8); }
.kpi .k-val small { font-size:var(--fs-3); }
/* D-11 可点击待办卡 */
.kpi.kpi-click { cursor: pointer; transition: border-color var(--t-fast) var(--ease-io), box-shadow var(--t-fast) var(--ease-io), transform var(--t-fast) var(--ease-io); }
.kpi.kpi-click:hover { border-color: #F0B269; box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ================= 模块 3 · 采购与库存 —— v57（2026-10-10 六项采购意见） ================= */
/* 页签工具条（筛选 / 搜索 / 新建 的规整排布） */
.tool-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
.tool-bar .sp { flex: 1 1 auto; }
.tool-bar .lb2 { font-size:var(--fs-3); color: var(--muted); }
.tb-sel { max-width: 108px; }
.tb-sel.sm { max-width: 92px; }
/* 趋势双色柱（需求 vs 下单） */
.trend { display: flex; gap: 8px; align-items: flex-end; padding: 6px 2px 0; }
.trend .tc { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.trend .tb { display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: 96px; width: 100%; }
.trend .tb i { display: block; width: 13px; border-radius: 4px 4px 2px 2px; min-height: 2px; }
.trend .tb .s1 { background: #C9D6E4; }
.trend .tb .s2 { background: var(--brand); }
.trend .lb { font-size:var(--fs-2); color: var(--muted); white-space: nowrap; }
.chart-legend { display: flex; gap: 14px; align-items: center; font-size:var(--fs-3); color: var(--muted); padding: 6px 0 2px; flex-wrap: wrap; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend .dot3 { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-legend .dot3.c1 { background: #C9D6E4; }
.chart-legend .dot3.c2 { background: var(--brand); }
.chart-legend .dot3.c3 { background: #F0B269; }
.sub-title { font-size:var(--fs-3); font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
/* 驾驶舱图表卡内边距 */
.chart-bd { padding: 12px 16px 14px; }
/* 三级品类树：二级行可折叠 */
tr.cat-l2 { cursor: pointer; }
tr.cat-l2 > td { background: var(--bg-2); }
tr.cat-l2:hover > td { background: var(--line-2); }
tr.cat-l2.open .cat-arrow { transform: rotate(90deg); }
tr.cat-l1 .cat-arrow { transform: none; }
tr.cat-l1.open .cat-arrow { transform: rotate(90deg); }
/* 详情时间线（复用 .pr-chain 外观，含日期） */
.tl-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl-line .st { font-variant-numeric: tabular-nums; }
.tl-sep { color: var(--muted); font-size:var(--fs-3); }
.tl-badge { margin-left: auto; }
/* 合同附件（表单内文件选择） */
.file-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-pick .fname { font-size:var(--fs-3); color: var(--ink-2); word-break: break-all; }
/* 供应商概览：待审批条目 */
.sup-pending-it { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px dashed var(--line-2); }
.sup-pending-it:last-child { border-bottom: 0; }
.sup-pending-it .nm2 { flex: 1 1 auto; min-width: 0; }
.sup-pending-it .nm2 b { display: block; font-size:var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-pending-it .nm2 span { display: block; font-size:var(--fs-2); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 待办列表「忽略」链接 */
.soon-list a.snz { color: var(--muted); font-weight: 400; font-size:var(--fs-2); margin-left: 8px; }
.soon-list a.snz:hover { color: var(--ink-2); }
/* 交付列小徽章行 */
.deliv-cell { white-space: nowrap; }
.deliv-cell .d2 { margin-top: 3px; }
/* v57：采购驾驶舱 6 张 KPI 一行排布（作用域限定） */
.kpis.kpis6 { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }

/* v58：工资单明细分组标题行（基本/出勤/加班/津贴/汇总/实发 六组） */
.tbl .ps-grp td { background: var(--bg-2); font-size:var(--fs-3); font-weight: 650; color: var(--ink-2); letter-spacing: .02em; }
/* v58：驾驶舱提醒卡分区小标题 */
.alert-sec { padding: 10px 16px 0; font-size:var(--fs-3); font-weight: 650; color: var(--ink-2); }
.alert-sec .badge { margin-left: 6px; }

/* v59：综合总览（跨域 KPI + 六大业务域卡片） */
.ck-kpis { margin-bottom: 16px; }
.ck-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 6px; }
@media (max-width: 1180px) { .ck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ck-grid { grid-template-columns: 1fr; } }
.ck-card .card-bd { padding-top: 6px; }
.ck-ms { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 2px 0 12px; }
.ck-m { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ck-m i { font-style: normal; font-size:var(--fs-3); color: var(--muted); white-space: nowrap; }
.ck-m b { font-size:var(--fs-7); font-weight: 760; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ck-m.warn b { color: var(--warn); }
.ck-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-chips .chip { flex: 0 0 auto; }
.ck-soon-li { list-style: none; margin: 0; padding: 0; }
.ck-soon-li li { position: relative; padding: 4px 0 4px 14px; font-size:var(--fs-3); color: var(--ink-2); }
.ck-soon-li li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* v60：绩效管理模块（看板 KPI / 进度条 / 编辑器卡片 / 审批记录） */
.pf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 6px; }
.pf-kpi { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg-2); }
.pf-kpi b { display: block; font-size:var(--fs-8); font-weight: 760; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pf-kpi span { font-size:var(--fs-3); color: var(--muted); }
.pf-kpi.k-ok b { color: var(--ok); }
.pf-kpi.k-warn b { color: var(--warn); }
.pf-prog { height: 10px; border-radius: 6px; background: #EDF1F5; overflow: hidden; }
.pf-prog i { display: block; height: 100%; border-radius: 6px; background: var(--brand); transition: width .3s; }
.pf-sec { font-size:var(--fs-5); font-weight: 700; color: var(--ink-2); margin-bottom: 10px; }
/* v70 · 责任书编辑器：目标 / 策略 / 指标（对齐网格 + 字段标签）
   —— 指标块：主行（类型·名称·权重·否决）+ 标签化明细网格；
      策略块：标题行 + 标签化 meta 行；衡量指标表头吸顶（topbar 下）。 */
.pf-goal { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: var(--bg-2); }
.pf-g-top { display: flex; gap: 8px; align-items: center; }
.pf-g-top .badge { flex: 0 0 auto; }
.pf-g-top .input { flex: 1; min-width: 0; }
.pf-g-bd { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--line); }
.pf-strat { border-left: 2px solid var(--brand); background: var(--card); border-radius: 0 10px 10px 0; padding: 8px 10px 9px; margin-bottom: 8px; }
.pf-s-top { display: flex; gap: 8px; align-items: center; }
.pf-s-top .input { flex: 1; min-width: 0; height: 32px; }
.pf-s-meta { display: grid; grid-template-columns: 92px minmax(110px, .9fr) minmax(110px, .9fr) minmax(150px, 1.1fr); gap: 8px; margin-top: 8px; align-items: end; }
@media (max-width: 900px) { .pf-s-meta { grid-template-columns: 1fr 1fr; } }

.pf-meas-hd { position: sticky; top: var(--topbar-h); z-index: 6; background: var(--card);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.pf-meas { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 11px; margin-bottom: 10px; background: var(--card); transition: border-color .15s var(--ease-io); }
.pf-meas:hover { border-color: var(--brand-200); }
.pf-meas .input { height: 32px; }
.pf-meas .select { height: 32px; }
.pf-m-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf-m-no { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; background: var(--bg-2); color: var(--muted);
  font-size:var(--fs-2); font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.pf-kind { width: auto; flex: 0 0 auto; min-width: 104px; font-size:var(--fs-3); padding: 0 6px; }
.pf-kind.quant_pos { border-color: #BBD3F3; background: #F4F8FE; color: #17539F; }
.pf-kind.quant_neg { border-color: #F0D8A6; background: #FFFBF0; color: #8A5A05; }
.pf-kind.qual { border-color: var(--line); background: var(--bg-2); color: var(--ink-2); }
.pf-m-top [data-m-name] { flex: 1 1 220px; min-width: 160px; max-width: 620px; }
.pf-m-w { position: relative; flex: 0 0 104px; margin-left: auto; }
.pf-m-w .input { width: 100%; padding-right: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.pf-m-w i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size:var(--fs-3); color: var(--muted); }
.pf-m-veto { flex: 0 0 auto; }
.pf-m-del { flex: 0 0 auto; font-size:var(--fs-5); line-height: 1; padding: 4px 7px; }
.pf-m-grid { display: grid; gap: 8px; margin-top: 9px; align-items: end; }
.pf-m-grid.g5 { grid-template-columns: minmax(150px, 1.5fr) 76px minmax(140px, 1.5fr) 88px 88px; }
.pf-m-grid.g2 { grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr); }
@media (max-width: 900px) { .pf-m-grid.g5 { grid-template-columns: 1fr 1fr; } .pf-m-grid.g2 { grid-template-columns: 1fr; } }
.pf-mf { display: block; min-width: 0; }
.pf-mf > span { display: block; font-size:var(--fs-2); color: var(--faint); margin-bottom: 3px; letter-spacing: .01em; }
.pf-mf .input, .pf-mf .select { width: 100%; }
.pf-months { display: flex; align-items: center; gap: 5px; }
.pf-months .select { width: auto; flex: 1; min-width: 56px; }
.pf-months i { font-style: normal; color: var(--faint); }
.pf-log { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 14px; }
.pf-log-it { position: relative; padding: 6px 0; font-size:var(--fs-4); }
.pf-log-it::before { content: ''; position: absolute; left: -19px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }

/* v61：绩效管理（批次 2+3）监控矩阵 / 选择卡 / 分布 / 参数 */
.mon-tbl td { padding: 6px 8px; }
.mon-tbl th { padding: 6px 8px; font-size:var(--fs-2); }
.pf-rv-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-rv-pick-it { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; min-width: 210px; display: flex; flex-direction: column; gap: 3px; background: var(--bg-2); }
.pf-rv-pick-it:hover { border-color: var(--brand); }
.pf-rv-pick-it.active { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 1px var(--brand); }
.pf-rv-pick-it .badge { align-self: flex-start; }
.pf-dist { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg-2); }
.pf-params .chip { font-size:var(--fs-3); }
.pf-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* v61 修正：绩效工具条下拉按内容宽度（避免 flex 下撑满） */
#pf-cycle-pick, #pf-mon-letter, #pf-mon-period { width: auto; flex: 0 0 auto; }

/* ============ v62 · 资产管理（行政/IT 双域，view-assets.js） ============ */
.ast-head { padding: 18px 22px 6px; margin-bottom: 16px; }
.ast-head-main { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.ast-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-50); color: var(--brand);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ast-ico svg { width: 22px; height: 22px; }
.ast-ht h2 { font-size:var(--fs-7); display: flex; align-items: center; gap: 8px; margin: 0; }
.ast-ht p { color: var(--muted); font-size:var(--fs-3); margin-top: 3px; max-width: 780px; line-height: 1.6; }
.ast-head-ops { display: flex; gap: 8px; flex-wrap: wrap; }
.ast-tabs { margin-top: 14px; }
.ast-kpis { margin-bottom: 16px; }
.ast-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 980px) { .ast-two { grid-template-columns: 1fr; } }
.ast-bars { display: flex; flex-direction: column; gap: 8px; }
.ast-bar-row { display: flex; align-items: center; gap: 10px; }
.ast-bar-lb { width: 88px; flex: 0 0 auto; }
.ast-bar { flex: 1; height: 10px; background: #EDF1F5; border-radius: 5px; overflow: hidden; }
.ast-bar i { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.ast-bar-n { width: 36px; text-align: right; font-size:var(--fs-3); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ast-soon { margin-top: 4px; }
.ast-soon-list { display: flex; gap: 10px; flex-wrap: wrap; }
.ast-soon-it { display: inline-flex; align-items: center; gap: 8px; font-size:var(--fs-3); color: var(--muted);
  border: 1px dashed var(--line); border-radius: 999px; padding: 5px 14px; background: var(--bg-2); }
.ast-filter { padding: 12px 16px; margin-bottom: 16px; }
.ast-f-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ast-seg { flex: 0 0 auto; }
.ast-d-head { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.ast-d-no { font-size:var(--fs-5); font-weight: 700; }
.ast-d-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; margin-top: 14px; }
@media (max-width: 900px) { .ast-d-grid { grid-template-columns: repeat(2, 1fr); } }
.ast-d-cell .lb { display: block; font-size:var(--fs-2); color: var(--muted); }
.ast-d-cell b { font-size:var(--fs-4); font-weight: 600; }
.ast-d-note { margin-top: 12px; font-size:var(--fs-3); color: var(--ink-2); background: var(--bg); border-radius: 8px; padding: 8px 12px; }
.ast-d-sec { margin: 18px 0 8px; font-size:var(--fs-4); font-weight: 700; color: var(--ink-2); }
.ast-tl { margin-top: 4px; }
.ast-f-sec { margin: 16px 0 10px; font-size:var(--fs-4); font-weight: 700; color: var(--brand-700); border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.ast-f3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 900px) { .ast-f3 { grid-template-columns: 1fr; } }
.ast-st-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ast-st-diff { background: #FDF6F4; }
.ast-dm-bar { display: flex; height: 34px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.ast-dm-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size:var(--fs-3); font-weight: 650; white-space: nowrap; }
.ast-dm-seg.admin { background: var(--brand); }
.ast-dm-seg.it { background: var(--info); }
.ast-trend { display: flex; align-items: flex-end; gap: 8px; padding-top: 6px; }
.ast-tr-col { flex: 1; text-align: center; }
.ast-tr-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 60px; }
.ast-tr-bars i { width: 7px; border-radius: 3px 3px 0 0; display: block; }
.ast-tr-bars i.inn { background: var(--brand); }
.ast-tr-bars i.out { background: var(--danger); }
.ast-tr-col span { font-size:var(--fs-1); color: var(--muted); }
.ast-chips { display: flex; gap: 14px; flex-wrap: wrap; }
.ast-chip { display: inline-flex; align-items: center; gap: 6px; font-size:var(--fs-4); }
.ast-chip b { font-variant-numeric: tabular-nums; }
.ast-dim { opacity: .5; }
.mono { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size:var(--fs-3); }
/* I-4：离职支线内嵌的名下资产核对清单（view-lifecycle） */
.obc-ast { margin: 2px 0 0; }
.obc-ast-hd { font-size:var(--fs-3); font-weight: 650; color: var(--brand-700); margin: 8px 0 6px; }
.obc-ast-row { display: flex; align-items: center; gap: 10px; font-size:var(--fs-3); padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); margin-bottom: 6px; flex-wrap: wrap; }
.obc-ast-row .mono { color: var(--ink-2); }
.obc-ast-nm { flex: 1; min-width: 120px; font-weight: 600; }

/* ============================================================
   琥珀刻度 · 2.0 —— 动效与交互增强层（2026-10-11）
   ------------------------------------------------------------
   · 纯表现层增强：不改业务契约，类名契约完全继承 1.0。
   · ① 视图入口由 renderView 给 #view 补 .enter 类触发；
     ②③⑨ 由 core.js 的 C.motion 驱动（数字滚动 / 画弧 / 进度条）；
     其余均为 CSS 自触发。
   · 全部动画尊重 prefers-reduced-motion（文件顶部全局降级已覆盖）。
   ============================================================ */

/* ---------- 2.0 令牌 ---------- */
:root {
  --t-enter: 420ms;                            /* 大块入场上限（图表生长） */
  --t-exit:  160ms;                            /* 统一退出时长（比进入快） */
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);   /* 退出专用 */
  --mv-sm: 4px; --mv: 8px; --mv-lg: 16px;      /* 标准位移距离 */
  --stagger: 24ms;                             /* 级联节拍 */

  /* 图表分类色板（仅限图表；「其他/未分类」恒用 ch-8） */
  --ch-1: #EF7F17; --ch-2: #2563C9; --ch-3: #12946A; --ch-4: #8C5BD8;
  --ch-5: #0E93A8; --ch-6: #C0392C; --ch-7: #D9A21B; --ch-8: #7C8794;

  /* 层级语义阶梯（新组件从此表取档，禁止另发明数字） */
  --z-sticky-in: 2; --z-sticky-sub: 6; --z-topbar: 50; --z-sidebar: 60;
  --z-rail-tip: 80; --z-pop: 300; --z-lang: 400; --z-modal: 500;
  --z-rowmenu: 700; --z-auth: 800; --z-toast: 900; --z-progress: 950;
}

/* ---------- ① 视图入场 + 区块级联（renderView 触发） ---------- */
@keyframes viewIn { from { opacity: 0; transform: translateY(var(--mv)); } to { opacity: 1; transform: none; } }
.view.enter > * { animation: viewIn var(--t-slow) var(--ease) both; }
.view.enter > *:nth-child(1) { animation-delay: 0ms; }
.view.enter > *:nth-child(2) { animation-delay: 24ms; }
.view.enter > *:nth-child(3) { animation-delay: 48ms; }
.view.enter > *:nth-child(4) { animation-delay: 72ms; }
.view.enter > *:nth-child(5) { animation-delay: 96ms; }
.view.enter > *:nth-child(6) { animation-delay: 120ms; }
.view.enter > *:nth-child(7) { animation-delay: 144ms; }
.view.enter > *:nth-child(8) { animation-delay: 168ms; }
.view.enter > *:nth-child(n+9) { animation-delay: 192ms; }

/* ---------- ⑩ 列表 / 网格级联（可选启用：.stag 配 --i / .stag-cap 纯 CSS 上限 12 项） ---------- */
.stag > * { animation: viewIn var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.stag-cap > * { animation: viewIn var(--t-slow) var(--ease) both; }
.stag-cap > *:nth-child(1) { animation-delay: 0ms; }   .stag-cap > *:nth-child(2) { animation-delay: 24ms; }
.stag-cap > *:nth-child(3) { animation-delay: 48ms; }  .stag-cap > *:nth-child(4) { animation-delay: 72ms; }
.stag-cap > *:nth-child(5) { animation-delay: 96ms; }  .stag-cap > *:nth-child(6) { animation-delay: 120ms; }
.stag-cap > *:nth-child(7) { animation-delay: 144ms; } .stag-cap > *:nth-child(8) { animation-delay: 168ms; }
.stag-cap > *:nth-child(9) { animation-delay: 192ms; } .stag-cap > *:nth-child(10) { animation-delay: 216ms; }
.stag-cap > *:nth-child(11) { animation-delay: 240ms; } .stag-cap > *:nth-child(12) { animation-delay: 264ms; }
.stag-cap > *:nth-child(n+13) { animation-delay: 264ms; }

/* ---------- ② 数字滚动完成后的一次微闪（C.motion 加 .count-pop） ---------- */
@keyframes countPop { 50% { color: var(--brand-700); } }
.count-pop { animation: countPop var(--t-enter) var(--ease); }

/* ---------- ③ 按钮加载态（宽度不变；结果 toast / 弹窗关闭时自动清除） ---------- */
.btn.loading { pointer-events: none; position: relative; color: transparent !important; }
.btn.loading > svg { visibility: hidden; }
.btn.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.btn-ghost.loading::after, .btn-link.loading::after { border-color: rgba(180, 86, 10, 0.25); border-top-color: var(--brand-700); }

/* ---------- ④ 弹窗退出（先回后隐，与进入对称） ---------- */
.modal-mask.closing { animation: fadeOut var(--t-exit) var(--ease-in) both; }
.modal-mask.closing .modal { animation: modalOut var(--t-exit) var(--ease-in) both; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(10px) scale(0.985); } }

/* ---------- ⑤ 吐司退出 + SVG 语义图标 ---------- */
.toast.out { animation: toastOut var(--t-exit) var(--ease-in) both; }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }
.toast .t-ic { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1.5px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke: var(--brand); }
.toast.ok .t-ic { stroke: var(--ok); }
.toast.warn .t-ic { stroke: #B8860B; }
.toast.error .t-ic { stroke: var(--danger); }
.toast.info .t-ic { stroke: var(--info); }

/* ---------- ⑥ 行内菜单：从锚点方向生长（core.js 设 --mo 原点） ---------- */
.row-menu { transform-origin: var(--mo, top right); animation: menuIn 150ms var(--ease) both; }
@keyframes menuIn { from { opacity: 0; transform: scale(0.96) translateY(-2px); } to { opacity: 1; transform: none; } }
.row-menu.closing { animation: menuOut 120ms var(--ease-in) both; }
@keyframes menuOut { to { opacity: 0; transform: scale(0.98); } }

/* ---------- ⑦ 骨架 → 内容交叉淡入（配合 C.motion 按需使用） ---------- */
@keyframes bodyIn { from { opacity: 0; } to { opacity: 1; } }
.body-in { animation: bodyIn 200ms var(--ease-io); }

/* ---------- ⑧ 柱状图 / 图表条生长（趋势柱、横向条） ---------- */
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.trend-col .tf { transform-origin: bottom; animation: growY var(--t-enter) var(--ease) both; }
.bar-fill { transform-origin: left; animation: growX var(--t-enter) var(--ease) both; }

/* ---------- ⑪ 全局进度条（长任务 >650ms 自动出现；C.motion.progress 手动开关） ---------- */
.app-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-progress); pointer-events: none; opacity: 0; transition: opacity var(--t-fast) var(--ease-io); }
.app-progress.on { opacity: 1; }
.app-progress i { display: block; height: 100%; width: 36%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--brand-400), var(--brand)); animation: barRun 1.1s var(--ease-io) infinite; }
@keyframes barRun { from { transform: translateX(-110%); } to { transform: translateX(320%); } }

/* ---------- ⑫ 微反馈补强 ---------- */
.kpi.kpi-click:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.tbl tbody tr[data-log]:active { background: var(--brand-100); }

/* ---------- 校验错误态标准（2.0 统一；.field-err 行内消息） ---------- */
.input.err, .select.err, .textarea.err { border-color: var(--danger); }
.input.err:focus, .select.err:focus, .textarea.err:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(192, 57, 44, 0.16); }
.field-err { display: flex; align-items: center; gap: 5px; font-size:var(--fs-3); color: var(--danger); margin-top: 6px; }

/* ============================================================
   法务管理（v63）· 案件 / 合同 / 文件库
   ------------------------------------------------------------
   .lg-head 复刻 .ast-head 头部；其余为列表/弹窗局部增强。
   ============================================================ */
.lg-head { padding: 18px 22px 6px; margin-bottom: 16px; }
.lg-head .vtabs { margin-top: 14px; }
.lg-d-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lg-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.lg-fold { border: 0; background: none; cursor: pointer; color: var(--brand); font-size:var(--fs-3); padding: 0 2px; font-weight: 700; }
.lg-add-row td { background: var(--bg-2); }
.lg-add-row td:first-child { padding-left: 24px; }
.lg-dim { opacity: .55; }
.lg-ptrow { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; align-items: center; }
.lg-cm-grp { margin: 12px 0 4px; font-size:var(--fs-4); display: flex; align-items: center; gap: 8px; }
.lg-cm-row { display: flex; gap: 10px; align-items: center; padding: 5px 8px; border-bottom: 1px dashed var(--line-2); font-size:var(--fs-4); }
.chk-inline { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; font-size:var(--fs-4); cursor: pointer; }
.chk-line { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size:var(--fs-5); }
#lg-body .ast-f-row .spacer, .lg-d-head .spacer, .lg-cm-row .spacer, .lg-cm-grp .spacer { flex: 1; }

/* ============================================================
   流程中心（v64）· 审批归口 / 流程地图 / 审批配置
   ============================================================ */
.nav-item .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto; border-radius: 9px; background: var(--brand); color: #fff; font-size:var(--fs-2); font-weight: 700; font-style: normal; }
.fc-hero { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px; }
.fc-hero .sub { color: var(--muted); font-size:var(--fs-4); }
.fc-flowgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 900px) { .fc-flowgrid { grid-template-columns: 1fr; } }
.fc-flowcard { display: flex; flex-direction: column; gap: 10px; }
.fc-flow-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fc-flow-hd b { font-size:var(--fs-5); }
.fc-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fc-chain .fc-n { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--bg-2); font-size:var(--fs-3); color: var(--ink-2); white-space: nowrap; }
.fc-chain .fc-a { color: var(--faint); font-size:var(--fs-3); }

/* ============================================================
   批量导入体系（v65）· 导入中心 / 三步向导 / 校验报告
   ============================================================ */
.impc-hero { padding: 16px 20px; margin-bottom: 14px; background: linear-gradient(135deg, rgba(239, 127, 23, .07), transparent 60%); }
.impc-hero p { color: var(--muted); font-size:var(--fs-4); margin: 6px 0 0; }
.impc-sec { margin-bottom: 18px; }
.impc-sec-t { font-size:var(--fs-5); font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.impc-sec-t::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--brand); }
.impc-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.impc-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.impc-name b { font-size:var(--fs-5); }
.impc-d { color: var(--muted); font-size:var(--fs-3); line-height: 1.6; flex: 1; }
.impc-a { display: flex; gap: 8px; }
.impc-a .btn { flex: 0 0 auto; }

.impk-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.impk-step { display: inline-flex; align-items: center; gap: 7px; font-size:var(--fs-3); color: var(--muted); }
.impk-step i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line); font-style: normal; font-size:var(--fs-2); font-weight: 700; }
.impk-step.active { color: var(--brand); font-weight: 700; }
.impk-step.active i { background: var(--brand); border-color: var(--brand); color: #fff; }
.impk-step.done { color: var(--ok); }
.impk-step.done i { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.impk-line { flex: 1; height: 1px; background: var(--line); }
.impk-desc { font-size:var(--fs-4); color: var(--ink-2); margin-bottom: 10px; line-height: 1.7; }
.impk-req { font-size:var(--fs-3); color: var(--muted); margin-bottom: 12px; }
.impk-tmpl { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px dashed var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; background: var(--bg-2); }
.impk-tmpl b { font-size:var(--fs-4); }
.impk-tmpl p { color: var(--muted); font-size:var(--fs-3); margin: 3px 0 0; }
.impk-drop { margin-bottom: 6px; cursor: pointer; }
.impk-checkbox { display: flex; gap: 18px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.impk-stat { font-size:var(--fs-3); color: var(--muted); }
.impk-stat b { font-size:var(--fs-6); margin-right: 4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.impk-stat.ok b { color: var(--ok); }
.impk-stat.bad b { color: var(--danger); }
.map-tbl tr.impk-missing td { background: rgba(179, 38, 30, .05); }

/* v66 · 双语名称：内联副名（灰小字） */
.bi-sub { font-size:var(--fs-3); color: var(--muted); font-weight: 500; }

/* ============================================================
   v67 · 自由文本「一键对照翻译」（UGC 双语层）
   ============================================================ */
.tr-b { display: inline-flex; align-items: center; border: 1px solid var(--brand-200); background: var(--brand-50); color: var(--brand-700); border-radius: var(--r-xs); font-size:var(--fs-2); line-height: 18px; padding: 0 7px; margin-left: 6px; cursor: pointer; vertical-align: 1px; font-weight: 600; white-space: nowrap; }
.tr-b:hover { background: var(--brand-100); border-color: var(--brand-300); }
.tr-b.on { background: var(--brand-100); border-color: var(--brand); }
.tr-b.ld { opacity: .6; cursor: default; }
.tr-o { display: none; margin-top: 6px; padding: 7px 11px; background: var(--bg-2); border-left: 3px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2); font-size:var(--fs-3); line-height: 1.65; white-space: pre-wrap; text-align: left; }
.tr-o[data-open="1"] { display: block; }
.tr-ai { display: block; margin-top: 4px; color: var(--faint); font-size:var(--fs-2); font-weight: 400; }

/* 输入套件：常用语快捷条 + 提交前预览 */
.tr-kit { margin-top: 8px; }
.tr-ph-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-lb { font-size:var(--fs-3); color: var(--muted); margin-right: 2px; flex: 0 0 auto; }
.tr-ph { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: var(--r-full); font-size:var(--fs-3); padding: 2px 10px; cursor: pointer; line-height: 1.6; white-space: nowrap; }
.tr-ph:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-50); }
.tr-pv-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
.tr-pv { border: 1px dashed var(--line); background: var(--bg-2); color: var(--muted); border-radius: var(--r-sm); font-size:var(--fs-3); padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.tr-pv:hover { border-color: var(--brand); color: var(--brand-700); }
.tr-pv.ld { opacity: .6; cursor: default; }
.tr-pv-out { display: none; font-size:var(--fs-3); color: var(--ink-2); background: var(--bg-2); border-left: 3px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 6px 11px; flex: 1 1 100%; min-width: 220px; white-space: pre-wrap; text-align: left; line-height: 1.65; }
.tr-pv-out[data-open="1"] { display: block; }
.tr-pv-out b { color: var(--brand-700); font-size:var(--fs-3); }

/* ============================================================
   v70 · 员工自助板块（ss-*）重设计
   —— Hero 头卡 / KPI 数字条 / 紧凑卡片网格 / 统一空态
   ============================================================ */
.ss-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 16px; position: relative; overflow: hidden;
  background: linear-gradient(120deg, #FFF4E8 0%, #FFFFFF 58%); }
.ss-hero::after { content: ''; position: absolute; right: -70px; top: -80px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(239, 127, 23, .10), transparent); pointer-events: none; }
.ss-ava { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px; display: grid; place-items: center;
  color: #fff; font-weight: 750; font-size:var(--fs-7); letter-spacing: .03em; white-space: nowrap; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 6px 16px rgba(21, 35, 66, .16); }
/* v78：头像上传（本人点击更新；照片覆盖首字母 + 编辑/移除角标） */
.ss-ava-wrap { position: relative; flex: 0 0 56px; }
.ss-ava-wrap .ss-ava { position: relative; cursor: pointer; z-index: 1; }
.ss-ava .ss-ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ss-ava-btn { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff; border: 2px solid #fff; display: grid; place-items: center;
  cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(21, 35, 66, .25); z-index: 2; }
.ss-ava-btn svg { width: 12px; height: 12px; }
.ss-ava-btn:hover { filter: brightness(1.06); }
.ss-ava-del { left: -6px; right: auto; background: #fff; color: #C0392B; }
.ss-ava-file { display: none; }
.ss-hero-txt { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ss-hero-txt h2 { margin: 0 0 4px; font-size:var(--fs-7); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-hero-txt h2 .bi-sub { font-size:var(--fs-3); color: var(--muted); font-weight: 600; }
.ss-hero-meta { color: var(--ink-2); font-size:var(--fs-3); }
.ss-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ss-tag { display: inline-flex; align-items: center; gap: 6px; font-size:var(--fs-2); color: var(--ink-2);
  background: rgba(255, 255, 255, .78); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.ss-tag i { font-style: normal; color: var(--faint); }
.ss-hero-ops { flex: 0 0 auto; display: flex; gap: 8px; position: relative; z-index: 1; }
@media (max-width: 720px) { .ss-hero { flex-wrap: wrap; } .ss-hero-ops { flex-basis: 100%; } }

/* v72：KPI 数字条改为网格 —— 按数量铺满整行（末块不再孤零零、右侧不留空档） */
.ss-kpis { display: grid; gap: 10px; margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.ss-kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ss-kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-kpis.k7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .ss-kpis.k4, .ss-kpis.k5, .ss-kpis.k6, .ss-kpis.k7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ss-kpis, .ss-kpis.k3, .ss-kpis.k4, .ss-kpis.k5, .ss-kpis.k6, .ss-kpis.k7 { grid-template-columns: 1fr; }
}
.ss-kpi { min-height: 64px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px 10px; }
.ss-kpi b { display: block; font-size:var(--fs-8); font-weight: 760; letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-kpi b i { font-style: normal; font-size:var(--fs-3); font-weight: 600; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.ss-kpi span { display: block; font-size:var(--fs-3); color: var(--muted); margin-top: 2px; }
.ss-kpi small { display: block; font-size:var(--fs-2); color: var(--faint); margin-top: 1px; }
.ss-kpi.k-b { border-color: var(--brand-200); background: var(--brand-50); }
.ss-kpi.k-b b { color: var(--brand-700); }

/* v72：卡片墙统一规格 —— 等宽 + 统一卡高（信息超出卡内截断，完整内容走「查看全部」；空态垂直居中） */
.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(370px, 1fr)); gap: 14px; }
@media (max-width: 860px) { .ss-grid { grid-template-columns: 1fr; } }
.ss-grid > .ss-card { height: 302px; display: flex; flex-direction: column; }
.ss-grid > .ss-card > .ss-card-bd { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ss-grid > .ss-card .ss-empty2 { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ss-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(21, 35, 66, .04); }
.ss-card-hd { display: flex; align-items: center; gap: 9px; padding: 12px 16px 8px; }
.ss-card-hd h3 { margin: 0; font-size:var(--fs-5); }
.ss-card-hd .spacer { flex: 1; }
.ss-ic { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; background: var(--bg-2); color: var(--ink-2);
  display: grid; place-items: center; }
.ss-ic svg { width: 15px; height: 15px; }
.ss-card-bd { padding: 2px 16px 14px; }

.ss-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size:var(--fs-4); }
.ss-kv:last-child { border-bottom: 0; }
.ss-kv span { color: var(--muted); flex: 0 0 auto; }
.ss-kv b { text-align: right; word-break: break-all; font-weight: 600; }
.ss-kvs { padding-top: 2px; }
.ss-list { } /* 列表容器（内各行自带分隔线） */
.ss-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size:var(--fs-4); border-bottom: 1px dashed var(--line); }
.ss-line:last-child { border-bottom: 0; }
.ss-line > span:first-child { flex: 1; min-width: 0; }
.ss-line .ss-amt { font-variant-numeric: tabular-nums; }
/* 双行行式（类型 + 次要信息两行，徽章居右） */
.ss-2l { align-items: flex-start; }
.ss-2l-l { flex: 1; min-width: 0; }
.ss-2l-l b { display: block; font-size:var(--fs-4); }
.ss-2l .badge { flex: 0 0 auto; margin-top: 1px; }
.ss-click { cursor: pointer; border-radius: 8px; padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; }
.ss-click:hover { background: var(--bg-2); }
.ss-mut { color: var(--muted); font-size:var(--fs-3); }
.ss-mt6 { margin-top: 6px; }
.ss-empty { color: var(--muted); font-size:var(--fs-3); padding: 10px 0; text-align: center; }
/* 统一空态：图标 + 文案 + 引导 */
.ss-empty2 { text-align: center; padding: 16px 6px 12px; color: var(--muted); }
.ss-e-ic { width: 26px; height: 26px; color: var(--faint); display: block; margin: 0 auto 6px; }
.ss-e-t { font-size:var(--fs-3); }
.ss-e-h { font-size:var(--fs-2); color: var(--faint); margin-top: 3px; }
/* 迷你统计块 */
.ss-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-stats.ss-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ss-stat { flex: 1 1 0; min-width: 64px; text-align: center; background: var(--bg-2); border-radius: 10px; padding: 8px 4px; }
.ss-stat b { display: block; font-size:var(--fs-7); font-variant-numeric: tabular-nums; }
.ss-stat span { color: var(--muted); font-size:var(--fs-2); }
.ss-stat-wide { flex: 0 0 auto; min-width: 88px; padding-left: 14px; padding-right: 14px; }
/* 我的信息：密集两列（自动折列），仅显示已填字段 */
.ss-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 18px; padding-top: 2px; }
.ss-cell { padding: 3px 0; border-bottom: 1px dashed var(--line); min-width: 0; }
.ss-cell span { display: block; font-size:var(--fs-2); color: var(--faint); }
.ss-cell b { display: block; font-size:var(--fs-4); font-weight: 600; margin-top: 1px; word-break: break-all; }
.ss-cell.w2 { grid-column: 1 / -1; }
.ss-note { display: flex; gap: 7px; align-items: flex-start; margin-top: 10px; padding: 8px 11px;
  background: var(--bg-2); border-radius: 10px; font-size:var(--fs-3); color: var(--muted); line-height: 1.55; }
.ss-note svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: var(--faint); }
.ss-note .badge { margin: 0; }
.ss-note-sm { margin-top: 6px; padding: 7px 10px; }
/* 审批链（步骤条） */
.ss-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.ss-fn { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2); border-radius: var(--r-full); font-size:var(--fs-3); padding: 1px 10px; white-space: nowrap; }
.ss-fn.ok { border-color: transparent; background: var(--ok-bg, rgba(22, 133, 91, .12)); color: var(--ok); font-weight: 600; }
.ss-fn.bad { border-color: transparent; background: rgba(179, 38, 30, .1); color: var(--danger); font-weight: 600; }
.ss-fn.now { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); font-weight: 700; }
.ss-fa { color: var(--faint); font-style: normal; }
.ss-mini { color: var(--faint); font-size:var(--fs-2); padding: 2px 0 2px 2px; }
.ss-route { margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg-2); font-size:var(--fs-3); }
.ss-block-t { font-size:var(--fs-3); font-weight: 700; color: var(--ink-2); margin: 12px 0 6px; }
.ss-chain-detail { margin-top: 8px; }
.ss-cd-row { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size:var(--fs-3); }
.ss-cd-row:last-child { border-bottom: 0; }
.ss-cd-row .badge { margin-left: 6px; }
/* 待我处理 */
.ss-pd { align-items: flex-start; }
.ss-pd-main { flex: 1; min-width: 0; }
.ss-pd-ops { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.ss-reason { margin-top: 3px; }
/* 职能岗位多选（账号编辑） */
.jr-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 0; }
.jr-checks .chk { font-size:var(--fs-4); }

/* ============================================================
   v71 · 权限矩阵（设置 → 权限矩阵：账号 × 模块）
   ============================================================ */
.mx-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mx-sbox { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 5px 10px; font-size:var(--fs-3); }
.mx-sbox input { border: 0; outline: 0; font: inherit; width: 200px; background: transparent; color: inherit; }
.mx-bar-tip { margin-left: auto; font-size:var(--fs-3); color: var(--muted); }
.mx-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mx-lg { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size:var(--fs-3); color: var(--muted); }
.mx-lg i { width: 17px; height: 17px; border-radius: 6px; display: inline-grid; place-items: center; font-style: normal; font-size:var(--fs-2); font-weight: 800; flex: 0 0 auto; }
.mx-lg .s-on { background: var(--brand); color: #fff; }
.mx-lg .s-lock { background: #fdf0e0; color: #c96a10; border: 1px solid #f0d9bd; }
.mx-lg .s-add { background: #fff; color: #b9b2a8; border: 1.5px dashed #cfc8bd; }
.mx-lg .s-na { background: #f4f2ec; color: #c9c2b8; }
.mx-lg .s-den { background: #eceae4; color: #a59e93; }
.mx-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
table.mx-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1120px; font-size:var(--fs-3); table-layout: fixed; }
table.mx-table th, table.mx-table td { border-bottom: 1px solid var(--line-2, #f1ede6); padding: 5px 3px; text-align: center; }
table.mx-table tbody tr:last-child td { border-bottom: 0; }
table.mx-table thead th { background: #faf7f1; font-weight: 600; color: var(--muted); white-space: nowrap; font-size:var(--fs-2); padding: 6px 3px; }
table.mx-table tr.mx-ghd th { border-bottom: 1px solid var(--line); color: #c96a10; font-size:var(--fs-2); letter-spacing: .05em; background: #f6f1e8; }
td.mx-sticky, th.mx-sticky { position: sticky; left: 0; z-index: 3; background: var(--card); text-align: left !important; padding-left: 12px !important; box-shadow: 2px 0 0 var(--line-2, #f1ede6); }
thead th.mx-sticky { background: #faf7f1; z-index: 4; }
tr.mx-ghd th.mx-sticky { background: #f6f1e8; }
.mx-gsep { border-left: 1px solid var(--line-2, #f1ede6); }
.mx-cc { font-size:var(--fs-1); color: #b3aca1; margin-top: 1px; font-weight: 400; }
td.mx-td { cursor: pointer; }
td.mx-td .mx-box { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; font-weight: 800; font-size:var(--fs-4); border: 1.5px dashed #d8d2c8; color: #b9b2a8; background: #fff; transition: all .12s; }
td.mx-td:hover .mx-box { transform: scale(1.1); }
td.mx-c-on .mx-box { background: var(--brand); color: #fff; border: 1.5px solid var(--brand); box-shadow: 0 1px 2px rgba(239, 127, 23, .35); }
td.mx-c-lock .mx-box { background: #fdf0e0; color: #c96a10; border: 1.5px solid #f0d9bd; }
td.mx-c-uni .mx-box { background: #f7f5f0; color: #b8b1a6; border: 1.5px solid #e8e2d8; }
td.mx-c-add .mx-box { background: #fff; color: #b9b2a8; border: 1.5px dashed #d8d2c8; }
td.mx-c-add:hover .mx-box { border-color: var(--brand); color: var(--brand); background: #fff8f0; }
td.mx-c-na .mx-box { background: #f4f2ec; color: #c9c2b8; border: 1.5px solid transparent; font-size:var(--fs-6); }
td.mx-c-den .mx-box { background: #eceae4; color: #a59e93; border: 1.5px solid transparent; text-decoration: line-through; }
td.mx-flash, tr td.mx-flash { animation: mxfl .9s ease; }
@keyframes mxfl { 0% { background: #ffe9d2; } 100% { background: transparent; } }
td.mx-cnt { font-size:var(--fs-2); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mx-acc { display: flex; flex-direction: column; gap: 1px; min-width: 0; cursor: pointer; border-radius: 8px; padding: 2px 6px; margin-left: -6px; }
.mx-acc:hover { background: #f7f3ec; }
.mx-acc b { font-size:var(--fs-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-acc b i { font-style: normal; font-weight: 400; color: var(--muted); font-size:var(--fs-1); }
.mx-acc .sub { font-size:var(--fs-1); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-acc .bd { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.mx-acc .bd em { font-style: normal; font-size:var(--fs-1); border-radius: 5px; padding: 0 6px; line-height: 16px; }
.mx-rb { background: #fff1e2; color: #c96a10; border: 1px solid #f3d9b6; }
.mx-rb.adm { background: #fdecec; color: #b3261e; border: 1px solid #f5c8c8; }
.mx-jb { background: #eef4ff; color: #31559e; border: 1px solid #d6e4ff; }
.mx-pd { background: #f1efe9; color: #8a8378; border: 1px solid #e2ded5; }
.mx-foot { font-size:var(--fs-3); color: var(--muted); margin-top: 8px; }
.mx-pop { position: absolute; z-index: 80; width: 450px; max-width: 92vw; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(35, 32, 28, .18); padding: 14px 16px; font-size:var(--fs-4); }
.mx-tt { font-weight: 700; font-size:var(--fs-5); margin-bottom: 4px; }
.mx-dd { color: var(--muted); font-size:var(--fs-3); line-height: 1.7; }
.mx-imp { margin-top: 8px; background: #fff8ef; border: 1px solid #f3d9b6; border-radius: 8px; padding: 6px 10px; font-size:var(--fs-3); color: #6b4a16; }
.mx-ops { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.mx-tpls { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.mx-tpl { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 7px 12px; cursor: pointer; font-family: inherit; text-align: left; color: inherit; }
.mx-tpl:hover { border-color: var(--brand); background: #fffaf4; }
.mx-tpl b { font-size:var(--fs-3); white-space: nowrap; }
.mx-tpl span { flex: 1; font-size:var(--fs-2); color: var(--muted); }
.mx-tpl i { font-style: normal; color: #1a7f4b; font-weight: 800; }
.mx-tpl.done { opacity: .62; }
/* v73 数据范围弹层（九域 × 五档） */
.mx-scope-entry { margin-top: 10px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.mx-scope-grid { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.mx-scope-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mx-scope-row > span { font-size:var(--fs-3); color: var(--ink-2); white-space: nowrap; }
.mx-scope-row .select { flex: 1; min-width: 0; height: 30px; font-size:var(--fs-3); padding: 0 6px; }

/* ============================================================
   v73 · 手机端适配与「手机登录壳」（2026-10-13）
   ------------------------------------------------------------
   1) 登录相关 5 屏（登录 / 首次登录 / 忘记密码 / 强改密 / 待审核）
      ≤980px 启用「橙头 + 卡片上浮」统一壳；桌面端（>980px）零变化
   2) 全局手机端硬化：输入 ≥16px 防 iOS 缩放 · tab 行/月历收进视口 ·
      toast 通栏 · 触摸优化 · 安全区 · 按钮 loading
   ============================================================ */

/* ---- 手机品牌头（桌面隐藏；由 paintBrand 按语言填充）---- */
.auth-m { display: none; }
.auth-m-foot { display: none; }

/* ---- 密码可见性切换（仅手机壳内显示）---- */
.pw-wrap { position: relative; }
.pw-eye { display: none; }

/* ---- 按钮 loading（spinner + 语义文案）---- */
.btn-loading { pointer-events: none; }
.btn-loading::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.btn-ghost.btn-loading::before { border-color: rgba(16,24,40,.18); border-top-color: var(--ink-2); }

/* ---- 触摸优化：消灭约 300ms 点按延迟；防整页下拉误刷新 ---- */
button, .btn, .nav-item, .vtabs button, a { touch-action: manipulation; }
body { overscroll-behavior-y: contain; }

/* ---- 重置密码流程步骤指示 ---- */
.reset-steps { display: flex; align-items: center; gap: 6px; margin: 2px 0 14px; }
.reset-steps i { width: 26px; height: 4px; border-radius: 2px; background: var(--line); }
.reset-steps i.on { background: var(--brand); }
.reset-steps span { font-size:var(--fs-2); color: var(--muted); margin-left: 5px; font-weight: 600; }

/* ============================================================
   手机端（≤980px）：登录壳
   ============================================================ */
@media (max-width: 980px) {
  /* --- 壳容器改流式布局（iOS 键盘弹出可正常滚动）--- */
  .auth-wrap { position: relative; inset: auto; min-height: 100vh; min-height: 100dvh; flex-direction: column; }
  #pending-screen, #pwd-screen {
    position: relative; display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100dvh; background: var(--card);
  }
  .auth-brand { display: none; }

  /* --- 品牌头 --- */
  .auth-m {
    display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 auto;
    position: relative; overflow: hidden; color: #fff; box-sizing: border-box;
    min-height: clamp(150px, 22vh, 186px); padding: 54px 20px 32px;
    background: linear-gradient(152deg, #E9740F 0%, #EF7F17 48%, #F2902C 100%);
  }
  .auth-m::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(130% 95% at 82% 8%, #000 0%, transparent 72%);
    mask-image: radial-gradient(130% 95% at 82% 8%, #000 0%, transparent 72%);
  }
  .auth-m::after {
    content: ""; position: absolute; right: -190px; bottom: -240px; width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.20), rgba(255,255,255,0) 66%);
  }
  .auth-m > * { position: relative; z-index: 1; }
  .auth-m-logo { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .auth-m-logo img { width: 30px; height: 30px; border-radius: 9px; display: block; box-shadow: 0 2px 8px rgba(120,52,0,.25); }
  .auth-m-logo b { font-size:var(--fs-5); font-weight: 750; letter-spacing: -.01em; white-space: nowrap; }
  .auth-m-txt { margin-top: 16px; }
  .auth-m-txt h2 { margin: 0 0 6px; font-size:var(--fs-7); line-height: 1.32; font-weight: 800; letter-spacing: -.02em; }
  .auth-m-txt p { margin: 0; font-size:var(--fs-2); line-height: 1.6; color: rgba(255,255,255,.8); letter-spacing: .01em; }

  /* --- 语言切换：浮标 → 品牌头右上「白描边胶囊」（随页头滚动，不再压内容）--- */
  .lang-float {
    position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 6;
    background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34);
    border-radius: var(--r-full); padding: 2px; box-shadow: none;
  }
  .lang-float button { color: rgba(255,255,255,.92); border-radius: var(--r-full); padding: 7px 12px; min-height: 32px; font-size:var(--fs-3); }
  .lang-float button.active { background: #fff; color: var(--brand-700); }
  .lang-float button:not(.active):hover { background: rgba(255,255,255,.18); color: #fff; }

  /* --- 登录屏：面板 → 卡片上浮 --- */
  .auth-panel { flex: 1 1 auto; display: block; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--card); }
  .auth-box {
    width: auto; max-width: none; margin: -22px 14px 0; background: #fff; border-radius: 20px;
    padding: 16px 16px 14px;
    box-shadow: 0 16px 36px -16px rgba(16,24,40,.24), 0 2px 8px -2px rgba(16,24,40,.06);
  }
  .auth-m-foot {
    display: block; text-align: center; padding: 18px 26px calc(16px + env(safe-area-inset-bottom));
    font-size:var(--fs-2); color: var(--muted); line-height: 1.7;
  }

  /* --- 登录壳内控件尺寸（不影响系统内表单）--- */
  #auth-screen .input, #pwd-screen .input { height: 52px; font-size:var(--fs-6); padding: 0 14px; border-radius: 12px; }
  #auth-screen .pw-wrap .input, #pwd-screen .pw-wrap .input { padding-right: 48px; }
  #auth-screen .btn, #pwd-screen .btn, #pending-screen .btn { min-height: 52px; font-size:var(--fs-6); border-radius: 12px; }
  #auth-screen .auth-box h3 { font-size:var(--fs-8); }
  #auth-screen .auth-sub { font-size:var(--fs-4); margin-bottom: 18px; }
  #auth-screen .auth-tabs { padding: 3px; border-radius: 13px; margin-bottom: 16px; }
  #auth-screen .auth-tabs button { min-height: 44px; font-size:var(--fs-5); border-radius: 11px; }
  #auth-screen .auth-alt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 2px; min-height: 44px; margin-top: 6px; }
  #auth-screen .auth-alt button, #auth-screen .auth-alt [data-tab] {
    min-height: 44px; padding: 12px 7px; font-size:var(--fs-5); border-radius: 8px;
  }
  #auth-screen .auth-box .hint { margin-top: 14px !important; }
  .pw-eye {
    display: grid; place-items: center; position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; max-height: calc(100% - 6px); padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: var(--muted); cursor: pointer;
  }
  .pw-eye:hover { background: var(--line-2); color: var(--ink-2); }
  .pw-eye svg { width: 20px; height: 20px; }
  .pw-eye .ic-eye-off { display: none; }
  .pw-eye.on .ic-eye-off { display: block; }
  .pw-eye.on .ic-eye { display: none; }

  /* --- 强改密 / 待审核：卡片化 --- */
  #pwd-screen .center-screen, #pending-screen .center-screen {
    display: block; min-height: 0; padding: 0 0 calc(18px + env(safe-area-inset-bottom));
    background: transparent; flex: 1;
  }
  #pwd-screen .pwd-card, #pending-screen .pending-card {
    max-width: none; width: auto; margin: -22px 14px 0; border: 0; border-radius: 20px;
    padding: 22px 16px 18px;
    box-shadow: 0 16px 36px -16px rgba(16,24,40,.24), 0 2px 8px -2px rgba(16,24,40,.06);
  }
  #pwd-screen .pwd-tips { margin-top: 16px; }
  #pwd-screen .pwd-actions .btn, #pending-screen .pending-card .btn { flex: 1 1 0; }
}

/* ---- 系统内（应用主体）手机端硬化 ---- */
@media (max-width: 820px) {
  /* iOS 聚焦自动放大：全部输入 ≥16px */
  .input, .select, .textarea { font-size:var(--fs-6); }
  /* 行内 max-width（600/780px）会让页签行在窄屏溢出 → 强制收进视口（内部横滑） */
  .vtabs, .vtabs.wide { max-width: 100% !important; }
  /* 招聘面试月历：7 列允许压缩 + 紧凑化（原来固定列在窄屏外溢） */
  .iv-month, .iv-month-h { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .iv-cell { min-height: 64px; padding: 3px 3px 4px; }
  .iv-cell-d { font-size:var(--fs-2); }
  .iv-mini { font-size:var(--fs-1); padding: 2px 4px; gap: 3px; }
}

/* ---- 手机 toast：通栏顶部（含安全区，右侧不再截断）---- */
@media (max-width: 560px) {
  .toast-root { left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); }
  .toast { min-width: 0; max-width: none; width: 100%; }
}

/* ---- v73 短屏压缩（横屏 / 小屏手机）：品牌头收紧，主操作尽快入屏 ---- */
@media (max-width: 980px) and (max-height: 660px) {
  .auth-m { min-height: 0; padding: 44px 20px 22px; }
  .auth-m-txt { margin-top: 10px; }
  .auth-m-txt h2 { font-size:var(--fs-7); }
  .auth-m-txt p { display: none; }
}

/* ---- v73：趋势柱状图手机端横向滚动（多月份列不再撑破卡片）---- */
@media (max-width: 820px) {
  .trend { overflow-x: auto; padding-bottom: 8px; }
  .trend-col { min-width: 44px; }
}

/* ---- v73 补丁（2026-10-14）：应用主壳顶栏手机端重构 ----
   ≤820px：dsw（数据密度）与 chip-role（角色徽章）为桌面专属控件，收起（角色在侧栏底部已见）；
   标题单行省略（原被 flex 压缩成竖排 N 行）；语言切换保留（中英双语团队高频入口，原被挤压为 0 宽）。 */
@media (max-width: 820px) {
  .topbar { gap: 9px; }
  .topbar .spacer { display: none; }
  .topbar .tb-title { flex: 1 1 0; min-width: 0; }
  .topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .crumb { display: none; }
  .topbar .dsw, .topbar .chip-role { display: none; }
  .topbar > .icon-btn { flex: 0 0 auto; }
  .topbar .lang-toggle { flex: 0 0 auto; }
  .topbar .lang-toggle button { padding: 5px 9px; font-size:var(--fs-2); }
}

/* ============================================================
   v75 · 数据交换中心（模块十二）
   通道行 / 密钥展示 / 员工选择列表 / 指引键值行
   ============================================================ */
.ex-ch { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px dashed var(--line); }
.ex-ch:last-child { border-bottom: 0; }
.ex-ch .who { flex: 1; min-width: 0; }
.ex-ch .who b { font-size:var(--fs-4); }
.ex-ch .who .sub { font-size:var(--fs-3); color: var(--muted); margin-top: 2px; }
.ex-key { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size:var(--fs-3); background: var(--line-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; user-select: all; word-break: break-all; }
.ex-keybox { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size:var(--fs-5); font-weight: 600; background: var(--line-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; user-select: all; word-break: break-all; letter-spacing: 0.2px; }
.ex-emp { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; }
.ex-emp:hover { border-color: var(--brand); }
.ex-emp.sel { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(239, 127, 23, 0.18); }
.ex-kv { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.ex-kv:last-child { border-bottom: 0; }
.ex-kv .k { min-width: 148px; font-size:var(--fs-3); color: var(--ink-2); font-weight: 600; }
.ex-steps { padding-left: 20px; margin: 2px 0; font-size:var(--fs-4); color: var(--ink-2); line-height: 1.9; }
.btn-lite { border: 0; background: none; color: var(--brand); font-size:var(--fs-3); cursor: pointer; padding: 2px 4px; }
.btn-lite:hover { text-decoration: underline; }

/* ============================================================
   v79 员工自助服务引擎 · 页面样式（服务大厅 / 申请 / 消息 / 服务台）
   ============================================================ */
.ssv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 12px; }
.ssv-tabs button { border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 7px 16px; font-size:var(--fs-4); cursor: pointer; font-weight: 600; }
.ssv-tabs button .n { display: inline-block; min-width: 17px; height: 17px; line-height: 17px; text-align: center;
  background: #EF7F17; color: #fff; border-radius: 9px; font-size:var(--fs-1); margin-left: 6px; padding: 0 5px; }
.ssv-tabs button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.ssv-tabs button.active .n { background: rgba(255, 255, 255, .28); }

/* 服务大厅 */
.sv-cat { margin: 16px 0 4px; font-size:var(--fs-4); font-weight: 700; color: #b25a0a; }
.sv-cat:first-child { margin-top: 4px; }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.sv-tile { display: flex; gap: 11px; align-items: flex-start; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.sv-tile:hover { border-color: #EF7F17; transform: translateY(-1px); }
.sv-tile .t-ic { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: #fff4e8; color: #b25a0a; }
.sv-tile .t-ic svg { width: 18px; height: 18px; }
.sv-tile .t-b { flex: 1; min-width: 0; }
.sv-tile .t-b b { display: block; font-size:var(--fs-5); margin-bottom: 2px; }
.sv-tile .t-b .d { font-size:var(--fs-2); color: var(--faint); line-height: 1.5; }

/* 我的申请 */
.sv-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sv-filters button { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 8px;
  padding: 5px 13px; font-size:var(--fs-3); cursor: pointer; }
.sv-filters button.active { background: #fff4e8; border-color: #EF7F17; color: #b25a0a; font-weight: 600; }
.sv-req { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 11px; background: #fff; margin-bottom: 8px; cursor: pointer; }
.sv-req:hover { border-color: #EF7F17; }
.sv-req .r-ic { flex: 0 0 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: #f4f6fa; color: #5b6475; }
.sv-req .r-ic svg { width: 16px; height: 16px; }
.sv-req .r-b { flex: 1; min-width: 0; }
.sv-req .r-b b { font-size:var(--fs-4); }
.sv-req .r-b .m { font-size:var(--fs-2); color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-req .r-t { flex: 0 0 auto; text-align: right; }
.sv-req .r-t .tm { font-size:var(--fs-2); color: var(--faint); margin-top: 3px; }

/* 服务台 */
.sv-desk-row { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 11px; background: #fff; margin-bottom: 8px; }
.sv-desk-row .d-b { flex: 1; min-width: 0; }
.sv-desk-row .d-b b { font-size:var(--fs-4); }
.sv-desk-row .d-b .m { font-size:var(--fs-2); color: var(--faint); margin-top: 1px; }
.sv-desk-row .d-ops { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

/* 表单弹窗 */
.sv-form-note { background: #f8fafc; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
  font-size:var(--fs-3); color: var(--ink-2); margin-bottom: 12px; line-height: 1.6; }
.sv-tag-line { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

/* 详情弹窗 */
.sv-dl { background: #fafbfd; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.sv-dl .row { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size:var(--fs-3); border-bottom: 1px dashed var(--line); }
.sv-dl .row:last-child { border-bottom: 0; }
.sv-dl .row .k { color: var(--faint); flex: 0 0 auto; }
.sv-dl .row .v { text-align: right; word-break: break-all; }

/* 证明打印页 */
.cert-sheet { background: #fff; border: 1px solid #d8dbe2; border-radius: 6px; padding: 34px 40px; font-size:var(--fs-5);
  line-height: 2; color: #1a2233; }
.cert-sheet .c-hd { text-align: center; font-size:var(--fs-7); font-weight: 800; letter-spacing: 2px; margin-bottom: 4px; }
.cert-sheet .c-sub { text-align: center; color: var(--faint); font-size:var(--fs-2); margin-bottom: 20px; }
.cert-sheet .c-ttl { text-align: center; font-size:var(--fs-6); font-weight: 700; margin: 14px 0 18px; text-decoration: underline; }
.cert-sheet .c-ft { display: flex; justify-content: space-between; margin-top: 34px; font-size:var(--fs-3); color: var(--ink-2); }
@media print {
  body.printing-cert * { visibility: hidden !important; }
  body.printing-cert .cert-sheet, body.printing-cert .cert-sheet * { visibility: visible !important; }
  body.printing-cert .cert-sheet { position: absolute; left: 0; top: 0; width: 100%; border: 0; }
}

/* v79 补充：快捷办理条 / 分组标题 / 待签收条 */
.ss-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 2px; }
.ss-quick button { border: 1px solid #f0d9c0; background: #fff8ef; color: #b25a0a; border-radius: 999px;
  padding: 6px 14px; font-size:var(--fs-3); cursor: pointer; font-weight: 600; }
.ss-quick button:hover { border-color: #EF7F17; }
.ssv-sec { grid-column: 1 / -1; font-size:var(--fs-3); font-weight: 700; color: #b25a0a; margin: 8px 0 -2px; }
.ss-docs { border: 1px solid #f0d9c0; background: #fffaf2; border-radius: 12px; padding: 10px 14px; margin: 10px 0 0; }
.ss-docs .hd { display: flex; align-items: center; gap: 8px; font-size:var(--fs-3); font-weight: 700; color: #b25a0a; margin-bottom: 6px; }
.ss-doc { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed #f0d9c0; font-size:var(--fs-3); }
.ss-doc:first-of-type { border-top: 0; }
.ss-doc .t { flex: 1; min-width: 0; cursor: pointer; }
.ss-doc .t b { font-size:var(--fs-3); }
.ss-doc .t .m { font-size:var(--fs-2); color: var(--faint); margin-top: 1px; }

/* v79 图标尺寸修正（无上下文 svg 需显式尺寸） */
.ss-docs .hd svg { width: 15px; height: 15px; }
.r-ic svg { width: 16px; height: 16px; }
.sv-desk-row .r-ic { flex: 0 0 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #f4f6fa; color: #5b6475; }

/* v79b：卡片头换行治理——标题严禁折字；操作按钮紧凑化并允许整体换行右对齐 */
.ss-card-hd { flex-wrap: wrap; row-gap: 6px; }
.ss-card-hd h3 { white-space: nowrap; }
.ss-card-ops { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ss-card-ops .btn { min-width: 0; padding-left: 10px; padding-right: 10px; }

/* ============================================================
   v80 列显示配置（colcfg.js）
   ============================================================ */
.cf-rows { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.cf-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.cf-row:last-child { border-bottom: 0; }
.cf-row:hover { background: #fafbfd; }
.cf-ck { flex: 0 0 auto; display: flex; align-items: center; }
.cf-ck input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.cf-name { flex: 1; min-width: 0; font-size:var(--fs-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-ext { font-style: normal; font-size:var(--fs-1); color: #1d5fae; background: #e8f3ff; border-radius: 4px; padding: 0 6px; margin-left: 6px; }
.cf-w { width: 96px !important; min-width: 0 !important; padding-left: 8px !important; padding-right: 8px !important; }
/* 拖拽反馈 */
#view table.tbl th { position: relative; }
#view table.tbl th.col-move-th { opacity: .45; }
#view table.tbl th.col-drop-l { box-shadow: inset 3px 0 0 var(--brand); }
#view table.tbl th.col-drop-r { box-shadow: inset -3px 0 0 var(--brand); }


/* v80c：表格右上角「列设置」按钮（跟随表格注入） */
/* v100：列设置按钮移到表格上方，不再压住表头最后一个字段 */
.tbl-shell { position: relative; display: flex; flex-direction: column; gap: 8px; }
.tbl-tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.tbl-col-btn { position: static; width: auto; height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: #5b6475; border-radius: 7px; cursor: pointer; font-size:var(--fs-3); box-shadow: 0 1px 2px rgba(20,35,70,.05); }
.tbl-col-btn:hover { border-color: var(--brand); color: var(--brand); background: #f7f9ff; }
.tbl-col-btn svg { width: 14px; height: 14px; }

/* v100：姓名列横向滚动冻结 */
.tbl th[data-pin="1"], #view table.tbl th[data-pin="1"] { position: sticky; left: 0; z-index: 4; background: var(--bg-2); box-shadow: 2px 0 0 var(--line); }
.tbl td.col-pin { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 2px 0 0 var(--line); }
.tbl tbody tr:hover td.col-pin { background: #fafbfd; }
#view table.tbl th[data-pin="last"] { position: sticky; right: 0; z-index: 4; background: var(--bg-2); box-shadow: -2px 0 0 var(--line); }
#view table.tbl td.col-pin-right { position: sticky; right: 0; z-index: 2; background: #fff; box-shadow: -2px 0 0 var(--line); }
#view table.tbl tbody tr:hover td.col-pin-right { background: #fafbfd; }

/* v100：列设置面板分组与搜索 */
.cf-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cf-bar .input { flex: 1; min-width: 160px; }
.cf-sec { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size:var(--fs-3); color: var(--muted); font-weight: 650; }
.cf-sec b { color: var(--ink); font-size:var(--fs-4); }
.cf-sec .badge { font-weight: 600; }
.cf-empty { padding: 16px; text-align: center; color: var(--muted); font-size:var(--fs-3); }
.cf-row.pin { background: var(--bg-2); }
.cf-tag { font-style: normal; font-size:var(--fs-1); color: var(--brand); background: var(--brand-50); padding: 1px 6px; border-radius: 99px; margin-left: 6px; }
.cf-w { width: 88px !important; min-width: 0 !important; padding: 4px 6px !important; }
.cf-body { max-height: 52vh; overflow: auto; padding-right: 2px; }

/* ============================================================
   v86 · 角色与权限（线路B）：角色列表 / 权限树 / 范围 / 脱敏 / 审计
   ============================================================ */
.rb-wrap { display: grid; grid-template-columns: 262px minmax(0,1fr); gap: 14px; align-items: start; }
.rb-side { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px; position: sticky; top: 8px; }
.rb-side-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line-2); }
.rb-side-hd b { font-size:var(--fs-3); color: var(--ink-2); letter-spacing: .02em; }
.rb-side-hd .btn { min-width: 0; }
.rb-newform { display: grid; gap: 6px; padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.rb-newform .input { font-size:var(--fs-3); padding: 6px 8px; }
.rb-newops { display: flex; gap: 6px; }
.rb-newops .btn { min-width: 0; flex: 1 1 auto; }
.rb-list { max-height: 62vh; overflow: auto; padding-top: 6px; }
.rb-grp { font-size:var(--fs-2); color: var(--faint); letter-spacing: .06em; text-transform: uppercase; padding: 8px 6px 3px; }
.rb-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 9px; padding: 7px 9px; cursor: pointer; font: inherit; color: var(--ink); }
.rb-item:hover { background: var(--bg-2); }
.rb-item.on { background: var(--brand-50); border-color: var(--brand-200); }
.rb-item .rb-nm { flex: 1 1 auto; font-size:var(--fs-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-item .rb-meta { font-size:var(--fs-2); color: var(--muted); flex: 0 0 auto; }
.rb-item .rb-off { font-size:var(--fs-1); color: var(--gray); background: var(--gray-bg); border-radius: 5px; padding: 1px 5px; font-style: normal; }
.rb-main { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-height: 320px; }
.rb-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.rb-hd-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-hd-l .input { max-width: 190px; font-size:var(--fs-4); }
.rb-code { font-size:var(--fs-2); color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; font-family: ui-monospace, Menlo, monospace; }
.rb-tag { font-style: normal; font-size:var(--fs-1); color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: 5px; padding: 1px 6px; }
.rb-tag.cus { color: var(--info); background: var(--info-bg); border-color: #cfe0f7; }
.rb-hd-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rb-sec { padding-top: 14px; }
.rb-sec h4 { margin: 0 0 9px; font-size:var(--fs-3); color: var(--ink-2); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rb-sec h4 em { font-style: normal; font-weight: 400; font-size:var(--fs-2); color: var(--faint); }
.rb-tree { display: grid; gap: 6px; }
.rb-mod { border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--bg-2); }
.rb-mod.on { border-color: var(--brand-200); background: var(--brand-50); }
.rb-modh { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size:var(--fs-4); }
.rb-modh .rb-mname { font-weight: 600; }
.rb-modh .rb-cnt { margin-left: auto; font-size:var(--fs-2); color: var(--muted); }
.rb-sens { font-style: normal; font-size:var(--fs-1); color: var(--danger); background: var(--danger-bg); border-radius: 5px; padding: 1px 5px; }
.rb-job { font-style: normal; font-size:var(--fs-1); color: var(--info); background: var(--info-bg); border-radius: 5px; padding: 1px 5px; }
.rb-acts { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 7px 0 1px 24px; }
.rb-act { display: inline-flex; align-items: center; gap: 5px; font-size:var(--fs-3); color: var(--ink-2); cursor: pointer; }
.rb-scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 7px; }
.rb-scope-row { display: flex; align-items: center; gap: 8px; font-size:var(--fs-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.rb-scope-row > span { flex: 1 1 auto; color: var(--ink-2); white-space: nowrap; }
.rb-scope-row .select { max-width: 118px; font-size:var(--fs-3); }
.rb-depts { width: 100%; max-width: 420px; font-size:var(--fs-3); }
.rb-members { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rb-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px 3px 10px; font-size:var(--fs-3); }
.rb-x { border: 0; background: transparent; color: var(--faint); cursor: pointer; font-size:var(--fs-5); line-height: 1; padding: 0 2px; }
.rb-x:hover { color: var(--danger); }
.rb-none { font-size:var(--fs-3); color: var(--faint); }
.rb-addrow { display: flex; gap: 8px; align-items: center; max-width: 480px; }
.rb-addrow .select { flex: 1 1 auto; font-size:var(--fs-3); }
.rb-foot-wrap { margin-top: 14px; }
.rb-foot-grid { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 14px; align-items: start; }
.rb-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.rb-card h4 { margin: 0 0 10px; font-size:var(--fs-3); color: var(--ink-2); }
.rb-mask-list { display: grid; gap: 8px; }
.rb-mask-row { display: grid; grid-template-columns: 1fr 108px; gap: 6px 8px; align-items: center; font-size:var(--fs-3); }
.rb-mask-row em { grid-column: 1 / -1; font-style: normal; font-size:var(--fs-1); color: var(--faint); }
.rb-audit-tbl { font-size:var(--fs-3); }
.rb-audit-tbl td { vertical-align: top; }
@media (max-width: 980px) {
  .rb-wrap { grid-template-columns: 1fr; }
  .rb-side { position: static; }
  .rb-list { max-height: 240px; }
  .rb-foot-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v88 · 权限中心（归并式）：分组分隔 / 只读总览 / 状态行
   ============================================================ */
.vtabs .vt-sep { flex: 0 0 auto; width: 1px; height: 18px; background: var(--line); margin: 0 6px; align-self: center; }
.mx-lg.ro { background: var(--info-bg); color: var(--info); border-color: #cfe0f7; }
.mx-lg .s-ro { background: #fff; color: var(--info); border: 1px solid #cfe0f7; font-size:var(--fs-2); }
.mx-rb { font-style: normal; font-size:var(--fs-1); color: #6B4FA0; background: #F1EDF9; border-radius: 5px; padding: 1px 5px; }
.mx-ro { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size:var(--fs-3); }
.mx-ro > span { flex: 0 0 62px; color: var(--muted); font-size:var(--fs-2); }
.mx-ro > b { flex: 1 1 auto; font-weight: 600; word-break: break-word; }
.mx-st-uni, .mx-st-on, .mx-st-lock { color: var(--ok); }
.mx-st-den { color: var(--muted); }
.mx-st-na { color: var(--faint); }
.mx-st-add { color: var(--warn); }
.ro-box { border: 1px solid var(--line); background: var(--bg-2); border-radius: 8px; padding: 7px 10px; font-size:var(--fs-3); color: var(--ink-2); }

/* ============================================================
   v89 · 权限健康检查（批 2）：六项隐患一屏红点
   ============================================================ */
.mh-wrap { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.mh-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.mh-hd > b { font-size:var(--fs-4); color: var(--ink); }
.mh-tip { flex: 1 1 260px; font-size:var(--fs-2); color: var(--faint); }
.mh-badge { font-size:var(--fs-2); font-weight: 600; border-radius: 999px; padding: 2px 9px; background: var(--gray-bg); color: var(--gray); }
.mh-badge.ok { background: var(--ok-bg); color: var(--ok); }
.mh-badge.warn { background: var(--warn-bg); color: var(--warn); }
.mh-badge.err { background: var(--danger-bg); color: var(--danger); }
.mh-badge.na { background: var(--gray-bg); color: var(--gray); }
.mh-list { display: grid; gap: 4px; padding-top: 8px; }
.mh-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: start; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; }
.mh-row:hover { background: var(--bg-2); border-color: var(--line); }
.mh-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--ok); }
.mh-row.lv-warn .mh-dot { background: var(--warn); }
.mh-row.lv-err .mh-dot { background: var(--danger); }
.mh-row.lv-info .mh-dot { background: var(--info); }
.mh-body b { display: block; font-size:var(--fs-3); color: var(--ink); font-weight: 600; }
.mh-body span { display: block; font-size:var(--fs-2); color: var(--muted); margin-top: 2px; line-height: 1.5; }
.mh-body em { display: block; font-style: normal; font-size:var(--fs-2); color: var(--ink-2); margin-top: 3px; word-break: break-word; }
.mh-row.lv-err .mh-body em, .mh-row.lv-warn .mh-body em { color: var(--danger); }
.mh-row.lv-warn .mh-body em { color: var(--warn); }
.mh-right { display: flex; align-items: center; gap: 8px; padding-top: 1px; }
.mh-cnt { min-width: 30px; text-align: right; font-size:var(--fs-3); font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.mh-row.lv-warn .mh-cnt { color: var(--warn); }
.mh-row.lv-err .mh-cnt { color: var(--danger); }
.mh-row.lv-info .mh-cnt { color: var(--info); }
.mh-fail { font-size:var(--fs-3); color: var(--danger); padding: 8px 10px; }
@media (max-width: 980px) {
  .mh-row { grid-template-columns: 10px minmax(0,1fr); }
  .mh-right { grid-column: 2 / 3; justify-content: flex-start; }
  .mh-cnt { text-align: left; }
}

/* ============================================================
   v90 · 表单与输入（字段级必填 / 格式规则）
   ============================================================ */
.fc-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fc-bar .select { min-width: 150px; height: 34px; font-size:var(--fs-3); }
.fc-bar .input { flex: 1 1 220px; min-width: 160px; height: 34px; font-size:var(--fs-3); }
.fc-stats { font-size:var(--fs-2); color: var(--muted); white-space: nowrap; }
.fc-stats b { color: var(--ink); font-weight: 700; }
.fc-tip { font-size:var(--fs-3); color: var(--muted); background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.6; }
.fc-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fc-tbl .fname { display: block; }
.fc-tbl .fen { display: block; font-size:var(--fs-1); color: var(--faint); line-height: 1.35; font-weight: 400; }
.fc-tbl { font-size:var(--fs-3); }
.fc-tbl thead th { background: var(--bg-2); position: sticky; top: 0; z-index: 5; }
.fc-tbl tr.grp td { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 10px; }
.fc-tbl tr.grp .gname { font-weight: 700; font-size:var(--fs-3); color: var(--ink); }
.fc-tbl tr.grp .gmeta { font-size:var(--fs-2); color: var(--faint); margin-left: 8px; }
.fc-tbl tr.grp .fc-recbtn { float: right; margin-top: -3px; }
.fc-row td { vertical-align: middle; padding: 6px 10px; }
.fc-row.fc-off { opacity: .55; }
.fc-row.fc-diff { background: #FFFBF5; }
.fc-rd { font-style: normal; font-size:var(--fs-1); color: var(--info); background: var(--info-bg); border-radius: 5px; padding: 1px 5px; margin-left: 6px; }
.fc-sw { position: relative; display: inline-block; width: 34px; height: 19px; cursor: pointer; }
.fc-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-sw i { position: absolute; inset: 0; background: #D6DBE2; border-radius: 999px; transition: background .15s; }
.fc-sw i:before { content: ''; position: absolute; width: 15px; height: 15px; left: 2px; top: 2px; background: #fff;
  border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.fc-sw input:checked + i { background: var(--brand); }
.fc-sw input:checked + i:before { transform: translateX(15px); }
.fc-sw input:disabled + i { opacity: .5; }
.fc-sel { height: 30px; font-size:var(--fs-3); }
.fc-pm { display: inline-flex; align-items: center; gap: 5px; }
.fc-pm.na { color: var(--faint); }
.fc-p { width: 78px; height: 28px; font-size:var(--fs-2); padding: 0 6px; }
.fc-p.wide { width: 190px; font-family: ui-monospace, Menlo, monospace; }
.fc-pm i { font-style: normal; color: var(--faint); font-size:var(--fs-2); }
.fc-rec { font-style: normal; font-size:var(--fs-1); color: var(--brand-700); background: var(--brand-50);
  border: 1px solid var(--brand-200); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.fc-rec.off { color: var(--faint); background: var(--bg-2); border-color: var(--line); }
.fc-bad { border-color: var(--danger) !important; background: #FFF8F7 !important; }
.fc-msg { font-size:var(--fs-2); color: var(--danger); margin-top: 4px; line-height: 1.4; }
.fc-msg:empty { display: none; }
@media (max-width: 980px) {
  .fc-tbl { min-width: 720px; }
  .fc-stats { width: 100%; }
}

/* ============================================================
   v91 · 字典与选项
   ============================================================ */
.dc-wrap { display: grid; grid-template-columns: 236px minmax(0,1fr); gap: 14px; align-items: start; }
.dc-side { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px; position: sticky; top: 8px; }
.dc-side-hd { padding: 2px 6px 8px; border-bottom: 1px solid var(--line-2); }
.dc-side-hd b { font-size:var(--fs-3); color: var(--ink-2); }
.dc-list { max-height: 62vh; overflow: auto; padding-top: 6px; }
.dc-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 1px solid transparent;
  background: transparent; border-radius: 9px; padding: 7px 9px; cursor: pointer; font: inherit; color: var(--ink); }
.dc-item:hover { background: var(--bg-2); }
.dc-item.on { background: var(--brand-50); border-color: var(--brand-200); }
.dc-item .dc-nm { flex: 1 1 auto; font-size:var(--fs-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-item .dc-cnt { font-size:var(--fs-2); color: var(--muted); }
.dc-lock { font-style: normal; font-size:var(--fs-1); color: var(--faint); background: var(--bg-2); border-radius: 4px; padding: 0 4px; }
.dc-none { padding: 14px; text-align: center; color: var(--faint); font-size:var(--fs-3); }
.dc-main { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-height: 300px; min-width: 0; }
.dc-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.dc-hd b { font-size:var(--fs-4); }
.dc-hd .rb-code { margin: 0 8px; }
.dc-shell { overflow-x: auto; }
.dc-tbl { font-size:var(--fs-3); }
.dc-tbl td { padding: 7px 10px; }
.dc-tbl .fc-sw { transform: scale(.92); }
.dc-ops { white-space: nowrap; }
.dc-ops .btn { min-width: 0; padding: 0 8px; }
.dc-mv { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 6px;
  width: 24px; height: 24px; line-height: 1; cursor: pointer; margin-left: 4px; font-size:var(--fs-3); }
.dc-mv:hover { border-color: var(--brand-200); color: var(--brand-700); }
.dc-new { font-style: normal; font-size:var(--fs-1); color: var(--ok); background: var(--ok-bg); border-radius: 4px; padding: 0 5px; }
@media (max-width: 980px) {
  .dc-wrap { grid-template-columns: minmax(0, 1fr); }
  .dc-side { position: static; }
  .dc-list { max-height: 220px; }
}


/* v108：页签溢出提示 + 手机端点按尺寸 */
.vtabs { scrollbar-width: thin; scrollbar-color: #CFD6DF transparent; }
.vtabs.is-scroll {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  padding-right: 8px;
}
@media (max-width: 640px) {
  .btn-mini, .btn-sm { min-height: 40px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  .tbl .btn-link { min-height: 34px; display: inline-flex; align-items: center; }
}
.empty { padding: 40px 18px; }