/* =====================================================================
 * 考勤月报管理系统 — HAMT 页面设计开发包 V1.0 正式主题
 * 依据：tokens.json / tokens.css / 开发设计手册 / 8 张页面图示
 * 骨架：56px 顶栏 + 40px 全局月结流程条 + 208px 白色侧栏 + 独立滚动正文
 * 色板：#165DFF 主色 · #F7F8FA 画布 · #FFFFFF 表面 · #E5E6EB 边框
 * 规范：8pt 间距 · L1–L5 五级字号 · 40/32px 高密度表格 · 状态语义三重编码
 * 兼容：保留全部既有类名与旧变量别名；table.tpl 与 @media print 独立保留，
 *       确保按「日月报表示例.xlsx」导出与打印的版式不受后台主题影响。
 * ===================================================================== */

:root{
  /* ---------- V1 精确色板（tokens.json） ---------- */
  --color-primary:#165DFF;      --color-primaryHover:#4080FF;  --color-primaryActive:#0E42D2;
  --color-selected:#E8F3FF;     --color-text:#1D2129;          --color-secondary:#4E5969;
  --color-muted:#86909C;        --color-border:#E5E6EB;        --color-surface:#FFFFFF;
  --color-canvas:#F7F8FA;       --color-success:#00875A;       --color-warning:#B76E00;
  --color-danger:#D92D20;       --color-neutral:#667085;

  /* ---------- V1 精确布局尺寸 ---------- */
  --header:56px;  --workflow:40px;  --sidebar:208px;  --contentPadding:24px;
  --tableRow:32px; --tableHeader:40px; --control:40px;
  --drawer:480px;  --verificationDrawer:400px;
  --space-8:8px; --space-16:16px; --space-24:24px; --space-32:32px;
  --space-40:40px; --space-48:48px; --space-56:56px; --space-64:64px;

  /* ---------- 主题变量（供组件与内联样式使用） ---------- */
  --primary:var(--color-primary);        --primary-hover:var(--color-primaryHover);
  --primary-active:var(--color-primaryActive);
  --primary-600:var(--color-primaryHover); --primary-700:var(--color-primaryActive);
  --primary-soft:var(--color-selected);  --primary-ring:rgba(22,93,255,.16);

  --canvas:var(--color-canvas);   --surface:var(--color-surface);
  --panel:var(--color-surface);   --ink:var(--color-text);
  --ink2:var(--color-secondary);  --ink3:var(--color-muted);
  --line:var(--color-border);     --line2:var(--color-border);

  --ok:var(--color-success);      --ok-soft:#E8F8F1;
  --warn:var(--color-warning);    --warn-soft:#FFF7E6;
  --danger:var(--color-danger);   --danger-soft:#FEF0EF;
  --neutral:var(--color-neutral);

  /* ---------- 旧变量别名（index.html / app.js 内联样式依赖，勿删） ---------- */
  --bg:var(--canvas);  --accent:var(--primary);  --accent-strong:var(--primary-active);
  --accent-soft:var(--primary-soft);  --blue:var(--primary);  --blue-soft:var(--primary-soft);
  --navy-900:#1D2129;  --navy-800:#4E5969;  --navy-700:#86909C;

  /* ---------- 8pt 间距（4px 仅用于紧凑单元格与标签半步） ---------- */
  --sp-h:4px;  --sp-1:8px;  --sp-2:16px; --sp-3:24px;
  --sp-4:32px; --sp-5:40px; --sp-6:48px; --sp-8:64px;

  /* ---------- 五级字号：L5 辅助12 / L4 正文14 / L3 小标题16 / L2 分区20 / L1 页面24 ----------
     变量名沿用历史命名（由小到大），取值严格对应规范 L5→L1，全站只用这五级。 */
  --fs-l1:12px; --fs-l2:14px; --fs-l3:16px; --fs-l4:20px; --fs-l5:24px;
  --fs-brand:48px;   /* 规范例外：登录品牌展示标题，按确认版登录页图示放大 */

  /* ---------- 圆角与阴影（输入框/按钮4px，模态8px，抽屉0） ---------- */
  --radius:4px; --radius-sm:4px; --radius-card:8px;
  --shadow:0 1px 2px rgba(29,33,41,.04);
  --shadow-lift:0 8px 24px rgba(29,33,41,.10);

  /* ---------- 字体：严格按手册顺序；数字启用 tabular-nums ---------- */
  --font-body:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --font-display:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","Cascadia Mono",Consolas,"SFMono-Regular",monospace;
  --font-serif:"Songti SC","SimSun","宋体","Noto Serif CJK SC",serif;
  --font-num:"IBM Plex Sans Variable",var(--font-body);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------ 基础 */
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#C9CDD4 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C9CDD4;border-radius:4px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#86909C;background-clip:content-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font-body);background:var(--panel);color:var(--ink);
  font-size:var(--fs-l2);line-height:24px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{text-decoration:none;color:inherit;cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--primary-soft);color:var(--primary-active)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;box-shadow:0 0 0 4px var(--primary-ring)}
.numeric,.mono,.num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ P01 登录：蓝色全屏 + 400px 浅色面板（按确认版登录页截图复刻） */
.login-wrap{position:relative;height:100vh;min-height:640px;overflow:hidden;
  background:linear-gradient(118deg,#4159E8 0%,#3551DC 42%,#2A40C2 100%)}
.login-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.085) 0 17%,transparent 17%),
             linear-gradient(225deg,rgba(9,26,120,.16) 0 21%,transparent 21%),
             radial-gradient(880px 620px at 4% 0%,rgba(255,255,255,.16),transparent 62%),
             radial-gradient(760px 760px at 102% 108%,rgba(9,26,120,.34),transparent 64%)}
.login-wrap::after{content:"";position:absolute;pointer-events:none;
  left:-120px;bottom:-280px;width:760px;height:760px;transform:rotate(24deg);
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,0) 58%);
  clip-path:polygon(0 42%,58% 0,100% 74%,36% 100%)}
.login-shell::before{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-80px;top:-160px;width:560px;height:560px;
  background:rgba(255,255,255,.05);clip-path:polygon(100% 0,0 0,100% 100%);
  transform:rotate(10deg)}
.login-watermark{position:absolute;z-index:1;left:-96px;top:-196px;pointer-events:none;user-select:none;
  font-family:Arial,Helvetica,sans-serif;font-size:620px;line-height:1;font-weight:700;
  color:rgba(255,255,255,.05);transform:rotate(-8deg)}
.login-topbar{position:absolute;z-index:3;top:0;left:0;right:0;height:var(--header);
  display:flex;align-items:center;justify-content:flex-start;padding:0 var(--sp-4);
  color:#fff;font-size:var(--fs-l2)}
.login-brandline{display:flex;align-items:center;gap:0;font-weight:600;letter-spacing:.02em}
.haier-logo{display:inline-flex;align-items:center;line-height:0}
.haier-logo img{display:block;height:24px;width:auto}
.haier-word{display:none}
.brand-sep{display:inline-block;width:1px;height:16px;margin:0 10px 0 8px;background:rgba(255,255,255,.55)}
.brand-sys{font-size:var(--fs-l1);font-weight:400;letter-spacing:.04em;color:rgba(255,255,255,.9)}
.login-copyright{position:absolute;z-index:3;left:0;right:0;bottom:var(--sp-3);text-align:center;
  color:rgba(255,255,255,.78);font-size:var(--fs-l1);letter-spacing:.08em}

.login-shell{position:relative;z-index:2;height:100%;width:100%;max-width:none;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,34%);
  align-items:center;background:transparent;border:0;border-radius:0;box-shadow:none;
  animation:fadeIn .4s var(--ease) both}
.login-aside{position:relative;color:#fff;padding:var(--sp-6) var(--sp-8) var(--sp-6) calc(var(--sp-8) * 1.6);
  display:flex;flex-direction:column;justify-content:center;gap:var(--sp-3)}
.login-aside h2{margin:0;font-size:48px;line-height:62px;font-weight:600;
  letter-spacing:.02em;color:#fff;white-space:nowrap}
.login-aside h2 em{font-style:normal}
.aside-desc{margin:0;font-size:20px;letter-spacing:.06em;color:rgba(255,255,255,.9);
  max-width:none;line-height:30px}
.aside-kicker{margin:0;font-size:14px;letter-spacing:.12em;color:rgba(255,255,255,.82);
  font-weight:400;line-height:22px}
.aside-mid{position:relative;display:flex;flex-direction:column;gap:var(--sp-1);
  padding:0;width:max-content;max-width:100%}
.corner{position:absolute;width:22px;height:22px;border:4px solid #fff;opacity:.92}
.corner-tl{top:-52px;left:-46px;border-right:0;border-bottom:0}
.corner-br{bottom:-38px;right:-56px;border-left:0;border-top:0}
.aside-top,.aside-foot,.aside-meta,.aside-index,.aside-mark,.aside-brand{display:none}

.login-main{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-3);min-width:0;height:100%;overflow:auto;background:transparent}
.login-card{width:100%;max-width:400px;min-width:0;background:#F7F8FF;
  border:1px solid rgba(255,255,255,.7);border-radius:12px;
  box-shadow:0 24px 64px rgba(11,25,110,.28);padding:var(--sp-4);
  animation:rise .5s .08s var(--ease) both}
.login-card::before{display:none}
.login-brand{display:block;margin:0 0 var(--sp-h)}
.login-brand::before{display:none}
.login-brand .brand-mark{display:none}
.login-brand h1{margin:0;font-size:var(--fs-l5);line-height:32px;font-weight:600;color:var(--ink)}
.login-brand p{display:none}
.login-sub{margin:0 0 var(--sp-2);font-size:var(--fs-l2);color:var(--ink2)}
.login-note{display:none}       /* 登录页不展示技术信息，详见 P01 / A12 */
.login-card .field{margin-bottom:var(--sp-2)}
.login-card .field label{display:block;font-size:var(--fs-l2);font-weight:500;color:var(--ink);
  margin-bottom:var(--sp-1);line-height:16px}
.login-card .field input,.field input,.input,.select,textarea{width:100%;height:var(--control);
  padding:var(--sp-1) var(--sp-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;outline:none;font-size:var(--fs-l2);line-height:24px;color:var(--ink);
  transition:border-color .18s,box-shadow .18s}
.field input::placeholder,.input::placeholder,.select::placeholder{color:var(--ink3)}
.field input:hover,.input:hover,.select:hover,textarea:hover{border-color:#C9CDD4}
.field input:focus,.input:focus,.select:focus,textarea:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-ring)}
.field input[disabled]{background:var(--canvas);color:var(--ink3)}
.input-icon-wrap{position:relative}
.input-ico{position:absolute;z-index:1;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--ink3);pointer-events:none}
.login-card .input-icon-wrap input{padding-left:36px}
.pwd-field{position:relative}
.login-card .pwd-field input{padding-right:var(--sp-5)}
.pwd-toggle{position:absolute;z-index:2;right:12px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;padding:0;border:0;background:transparent;color:var(--ink3);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.pwd-toggle svg{width:16px;height:16px}
.pwd-toggle .ico-eye-off{display:none}
.pwd-toggle.showing .ico-eye{display:none}
.pwd-toggle.showing .ico-eye-off{display:block}
.pwd-toggle:hover{color:var(--primary)}
.row-inline{display:flex;gap:var(--sp-1)}
.row-inline input{flex:1;min-width:0}
.form-error{color:var(--danger);font-size:var(--fs-l1);line-height:16px;
  min-height:var(--sp-2);margin-top:var(--sp-1)}
.login-foot{margin-top:var(--sp-2);text-align:center;color:var(--ink2);
  font-size:var(--fs-l1);line-height:16px}
.login-foot a{color:var(--primary);font-weight:500}
.login-foot a:hover{color:var(--primary-active);text-decoration:underline}
.login-init{margin-top:var(--sp-3)}
#bootstrapBox{border-top:1px solid var(--line)!important;padding-top:var(--sp-2)!important}
#bootstrapBox .hint{font-size:var(--fs-l1);line-height:20px}

/* ------------------------------------------------------------------ 按钮 / 控件 / 状态语义 */
.btn{height:var(--control);border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:0 var(--sp-2);border-radius:var(--radius-sm);cursor:pointer;
  font-size:var(--fs-l2);font-weight:400;line-height:24px;letter-spacing:0;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s}
.btn:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.btn:active{background:var(--color-selected);color:var(--primary-active)}
.btn:disabled{opacity:.45;cursor:not-allowed;background:#fff;color:var(--ink3);border-color:var(--line)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn-primary:active{background:var(--primary-active);border-color:var(--primary-active);color:#fff}
.btn-ghost{background:#fff}
.btn-danger{color:var(--danger);border-color:#F5C6C2;background:#fff}
.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.btn-sm{height:var(--tableRow);padding:0 var(--sp-1);font-size:var(--fs-l1)}
.btn-block{width:100%;height:var(--control)}
.btn-row{display:flex;gap:var(--sp-1);flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.muted{color:var(--ink3)}
.mono{font-family:var(--font-mono);font-size:var(--fs-l1)}
.right{text-align:right}
.center{text-align:center}

/* 状态标签：颜色 + 圆点 + 文字三重编码 */
.tag{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0 var(--sp-1);
  border-radius:var(--radius-sm);font-size:var(--fs-l1);line-height:16px;font-weight:500;
  white-space:nowrap;border:1px solid transparent}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.tag-gray{background:#F2F3F5;color:var(--neutral);border-color:var(--line)}
.tag-blue{background:var(--primary-soft);color:var(--primary);border-color:#C7E0FF}
.tag-green{background:var(--ok-soft);color:var(--ok);border-color:#B7E7D2}
.tag-warn{background:var(--warn-soft);color:var(--warn);border-color:#F5DEB0}
.tag-red{background:var(--danger-soft);color:var(--danger);border-color:#F5C6C2}

/* ------------------------------------------------------------------ 固定框架：56 顶栏 + 40 流程条 + 208 侧栏 */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--header);z-index:100;
  background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--contentPadding)}
.topbar::after{display:none}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.brand-mark{width:24px;height:24px;flex:none;border-radius:var(--radius-sm);
  background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-l1);font-weight:600;position:relative;overflow:hidden}
.brand-mark::after{display:none}
.brand-mark.small{width:24px;height:24px;font-size:var(--fs-l1)}
.app-title{font-weight:600;font-size:var(--fs-l3);color:var(--ink);white-space:nowrap}
.app-title::after{content:"月结流程工作区";font-size:var(--fs-l1);color:var(--ink3);
  font-weight:400;margin-left:var(--sp-2);padding-left:var(--sp-2);
  border-left:1px solid var(--line);letter-spacing:0}
.env-tag{font-size:var(--fs-l1);line-height:16px;color:var(--ok);
  background:var(--ok-soft);border:1px solid #B7E7D2;border-radius:var(--radius-sm);
  padding:var(--sp-h) var(--sp-1);font-weight:500;display:inline-flex;align-items:center;
  gap:var(--sp-1);white-space:nowrap;flex:none}
.env-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.env-tag.offline{color:var(--danger);background:var(--danger-soft);border-color:#F5C6C2}
.env-tag.unknown{color:var(--neutral);background:#F2F3F5;border-color:var(--line)}
.period-select{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-l1);color:var(--ink2)}
.period-select>span{font-weight:400;white-space:nowrap}
.period-select select{height:var(--tableRow);min-width:232px;
  padding:0 var(--sp-4) 0 var(--sp-1);border:1px solid var(--line);border-radius:var(--radius-sm);
  background-color:#fff;color:var(--ink);font-size:var(--fs-l1);font-weight:400;
  appearance:none;cursor:pointer;outline:none;transition:border-color .18s,box-shadow .18s;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),
                   linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.period-select select:hover{border-color:var(--primary)}
.period-select select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
.user-label{font-size:var(--fs-l1);color:var(--ink2);max-width:176px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;border-left:1px solid var(--line);padding-left:var(--sp-2)}

/* 全局月结流程条：固定、全宽、只创建一次，状态来自当前周期 */
.workflow{position:fixed;top:var(--header);left:0;right:0;height:var(--workflow);z-index:100;
  background:var(--canvas);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--contentPadding);
  font-size:var(--fs-l1);color:var(--ink2)}
.wf-label{font-weight:500;color:var(--ink);white-space:nowrap;letter-spacing:0}
.wf-nodes{display:flex;align-items:center;gap:var(--sp-2);flex:1;min-width:0;overflow:hidden}
.wf-node{display:inline-flex;align-items:center;gap:var(--sp-h);height:24px;padding:0 var(--sp-1);
  border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;
  color:var(--ink2);font-size:var(--fs-l1);cursor:pointer;white-space:nowrap;line-height:16px;
  transition:background .16s,color .16s,border-color .16s}
.wf-node:hover{background:var(--primary-soft)}
.wf-node:hover .wf-txt{color:var(--primary)}
/* 流程条内图标固定 16px，当前节点容器 24px（手册） */
.wf-ico{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;color:#C9CDD4}
.wf-ico svg{width:16px;height:16px;display:block}
.wf-txt{font-weight:500;color:var(--ink)}
.wf-state{color:var(--ink3)}
.wf-arrow{color:var(--ink3);font-size:var(--fs-l2);line-height:1;flex:none;font-family:var(--font-num)}
.wf-node[data-state="done"] .wf-ico{color:var(--ok)}
.wf-node[data-state="done"] .wf-state{color:var(--ink3)}
.wf-node[data-state="current"]{border-color:var(--primary);background:var(--panel)}
.wf-node[data-state="current"] .wf-ico,.wf-node[data-state="current"] .wf-txt,
.wf-node[data-state="current"] .wf-state{color:var(--primary)}
.wf-node[data-state="fail"] .wf-ico{color:var(--danger)}
.wf-node[data-state="fail"] .wf-state{color:var(--danger)}
.wf-node[data-state="todo"] .wf-ico{color:#C9CDD4}
.wf-node[data-state="todo"] .wf-state{color:var(--ink3)}
.wf-period{white-space:nowrap;color:var(--ink3);border-left:1px solid var(--line);
  padding-left:var(--sp-2)}

.layout{display:block;min-height:0}
.sidebar{position:fixed;top:calc(var(--header) + var(--workflow));left:0;bottom:0;
  width:var(--sidebar);overflow-y:auto;background:var(--surface);
  border-right:1px solid var(--line);z-index:20;
  display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-1) 0}
.nav-group{font-size:var(--fs-l1);line-height:16px;color:var(--ink3);font-weight:400;
  letter-spacing:0;padding:var(--sp-2) var(--sp-2) var(--sp-1);margin:0}
.nav-item{display:flex;align-items:center;gap:var(--sp-1);height:var(--control);
  padding:0 var(--sp-2);border-radius:0;color:var(--ink2);font-size:var(--fs-l2);
  font-weight:400;margin:0;position:relative;cursor:pointer;
  transition:background .16s,color .16s}
.nav-item i{font-style:normal;width:16px;text-align:center;font-size:var(--fs-l2);
  color:var(--ink3);transition:color .16s;flex:none}
.nav-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item:hover{background:#F2F3F5;color:var(--primary)}
.nav-item:hover i{color:var(--primary)}
.nav-item.active{background:var(--primary-soft);color:var(--primary);font-weight:500}
.nav-item.active i{color:var(--primary)}
.nav-item.active::before{display:none}
.sidebar-foot{border-top:1px solid var(--line);padding:var(--sp-2)}
.sync-badge{font-size:var(--fs-l1);line-height:16px;color:var(--ink2);display:flex;
  align-items:center;gap:var(--sp-1)}
.sync-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);
  display:inline-block;flex:none;animation:pulse 2.4s ease-in-out infinite}
.sidebar-tip{font-size:var(--fs-l1);line-height:16px;color:var(--ink3);margin-top:var(--sp-1)}

.content{position:fixed;top:calc(var(--header) + var(--workflow));left:var(--sidebar);
  right:0;bottom:0;overflow:auto;padding:var(--contentPadding);
  min-width:0;background:var(--panel)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);
  margin-bottom:var(--sp-2);padding-bottom:var(--sp-1);border-bottom:1px solid var(--line)}
.page-head::before,.page-head::after{display:none}
.page-head h2{margin:0;font-size:var(--fs-l5);line-height:32px;font-weight:600;color:var(--ink)}
.page-head .sub{color:var(--ink2);font-size:var(--fs-l2);line-height:24px;margin-top:var(--sp-h)}
.page-head .sub b{color:var(--primary);font-weight:500}
.page-head .actions{display:flex;align-items:center;gap:var(--sp-1);flex:none;padding-bottom:var(--sp-h)}

.nav-toggle-btn{display:none;width:32px;height:32px;flex:none;align-items:center;justify-content:center;
  flex-direction:column;gap:var(--sp-h);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);cursor:pointer;padding:0}
.nav-toggle-btn:hover{background:var(--primary-soft);border-color:var(--primary)}
.nav-toggle-btn span{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s}
.nav-toggle-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-scrim{display:none}

/* ------------------------------------------------------------------ 白色卡片 / 栅格 / 指标 */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:var(--sp-2);margin-bottom:var(--sp-2)}
.card:hover{border-color:#C9CDD4}
.card-title{font-size:var(--fs-l3);line-height:24px;font-weight:600;margin:0 0 var(--sp-1);
  display:flex;align-items:center;gap:var(--sp-1);color:var(--ink)}
.card-title::before{content:"";width:3px;height:16px;background:var(--primary);
  border-radius:2px;flex:none}
.card-sub{font-size:var(--fs-l1);line-height:16px;color:var(--ink3);margin:0 0 var(--sp-2)}
.grid{display:grid;gap:var(--sp-2)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:var(--sp-2);box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::before{display:none}
.kpi:hover{border-color:#C9CDD4}
.kpi .label{font-size:var(--fs-l1);line-height:16px;color:var(--ink2);margin-bottom:var(--sp-1)}
.kpi .value{font-family:var(--font-num);font-size:var(--fs-l4);font-weight:600;
  line-height:32px;letter-spacing:0;color:var(--ink)}
.kpi .unit{font-size:var(--fs-l1);color:var(--ink3);margin-left:var(--sp-h);font-weight:400}
.kpi .foot{font-size:var(--fs-l1);line-height:16px;color:var(--ink3);margin-top:var(--sp-h)}
/* 工作台上方「内联统计」：贴近图示的一行紧凑统计，不做四张大卡 */
.stat-strip{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-3);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:var(--sp-1) var(--sp-2);margin-bottom:var(--sp-2)}
.stat-strip .kpi{border:0;border-radius:0;box-shadow:none;padding:var(--sp-1) 0;
  display:flex;align-items:baseline;gap:var(--sp-1);flex:0 0 auto}
.stat-strip .kpi .label{margin:0}
.stat-strip .kpi .value{font-size:var(--fs-l4);line-height:24px}
.stat-strip .kpi .foot{margin:0;max-width:264px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 工作台四张统计卡（P02：四个统计数字卡片，按 8pt 间距排列） */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--sp-2);margin-bottom:var(--sp-3)}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:var(--sp-2) var(--sp-3);box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}
.stat-card .label{font-size:var(--fs-l1);line-height:16px;color:var(--ink2);margin-bottom:var(--sp-1)}
.stat-card .value{font-family:var(--font-num);font-size:var(--fs-l4);font-weight:600;line-height:32px;color:var(--ink)}
.stat-card .value .unit{font-size:var(--fs-l1);color:var(--ink3);margin-left:var(--sp-h);font-weight:400}
.stat-card .foot{font-size:var(--fs-l1);line-height:16px;color:var(--ink3);margin-top:var(--sp-h)}

.step-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
.step{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-2);
  background:var(--surface);position:relative;transition:border-color .2s,background .2s}
.step .n{font-family:var(--font-mono);font-size:var(--fs-l1);color:var(--ink3);letter-spacing:.08em}
.step h4{margin:var(--sp-1) 0 var(--sp-h);font-size:var(--fs-l2);font-weight:600;line-height:24px}
.step p{margin:0;font-size:var(--fs-l1);line-height:16px;color:var(--ink2)}
.step .st{margin-top:var(--sp-2);padding-top:var(--sp-1);border-top:1px solid var(--line)}
.step.clickable{cursor:pointer}
.step.clickable:hover{border-color:var(--primary);background:var(--primary-soft)}
.step.is-done{background:var(--surface);border-color:var(--line);
  box-shadow:inset 3px 0 0 var(--ok)}
.step.is-current{border-color:var(--primary);background:var(--primary-soft)}

/* ------------------------------------------------------------------ 高密度表格：表头40 / 行32 / 冻结 / 独立滚动 */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);max-height:calc(100vh - 288px)}
table{width:100%;border-collapse:separate;border-spacing:0;
  font-size:var(--fs-l2);line-height:24px}
th{height:var(--tableHeader);background:var(--canvas);color:var(--ink2);font-weight:500;
  text-align:left;padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--line);
  white-space:nowrap;position:sticky;top:0;z-index:10;font-size:var(--fs-l2);line-height:24px}
td{height:var(--tableRow);padding:var(--sp-h) var(--sp-2);border-bottom:1px solid var(--line);
  white-space:nowrap;font-variant-numeric:tabular-nums;transition:background .14s}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--primary-soft)}
tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--primary)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* 冻结身份列：表头与首列（工号）常驻左侧；fz2 用于第二冻结列（姓名/部门），left 由 --fz2 控制 */
th.fz,td.fz{position:sticky;left:0;z-index:11;background:var(--surface)}
thead th.fz{z-index:14;background:var(--canvas)}
th.fz2,td.fz2{position:sticky;left:var(--fz2,96px);z-index:11;background:var(--surface)}
thead th.fz2{z-index:14;background:var(--canvas)}
tbody tr:hover td.fz,tbody tr:hover td.fz2{background:var(--primary-soft)}
.table-tools{display:flex;gap:var(--sp-1);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-2)}
.table-tools .input,.table-tools .select{width:auto;min-width:160px;height:var(--tableRow);
  padding:0 var(--sp-1);font-size:var(--fs-l1)}
.table-tools .btn{font-size:var(--fs-l1)}
.pager{display:flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2);
  font-size:var(--fs-l1);color:var(--ink2);line-height:16px}
.pager-info{margin-right:auto;color:var(--ink2)}
.pager-info b{color:var(--ink);font-family:var(--font-num);font-weight:600}
.empty{padding:var(--sp-6) var(--sp-3);text-align:center;color:var(--ink3);
  font-size:var(--fs-l1);line-height:16px}
.empty b{display:block;color:var(--ink);font-size:var(--fs-l3);line-height:24px;
  margin-bottom:var(--sp-1);font-weight:600}

/* ------------------------------------------------------------------ 差异高亮（增量同步） */
.diff-add,.diff-change,.diff-del{border-radius:var(--sp-h);padding:0 var(--sp-h);font-weight:600}
.diff-add{background:var(--ok-soft);color:var(--ok)}
.diff-change{background:var(--primary-soft);color:var(--primary)}
.diff-del{background:var(--danger-soft);color:var(--danger)}
tr.diff-add>td{background:var(--ok-soft)}
tr.diff-change>td{background:var(--primary-soft)}
tr.diff-del>td{background:var(--danger-soft)}
tbody tr.diff-add:hover>td,tbody tr.diff-change:hover>td,tbody tr.diff-del:hover>td{filter:brightness(.985)}
.log .diff-add,.log .diff-change,.log .diff-del{background:transparent}

/* 加载骨架 */
.skeleton{padding:var(--sp-2) var(--sp-3)}
.sk-head,.sk-row{background:linear-gradient(90deg,#E5E6EB 25%,#F7F8FA 50%,#E5E6EB 75%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--sp-h)}
.sk-head{height:24px;width:38%;margin-bottom:var(--sp-3)}
.sk-row{height:12px;margin-bottom:var(--sp-2)}
.sk-row:nth-child(2){width:100%}.sk-row:nth-child(3){width:92%}
.sk-row:nth-child(4){width:78%}.sk-row:nth-child(5){width:96%}
.sk-row:nth-child(6){width:64%}.sk-row:nth-child(7){width:88%}

/* ------------------------------------------------------------------ 表单 / 上传 / 日志 */
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
.form-grid .f{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.form-grid label{font-size:var(--fs-l1);line-height:16px;color:var(--ink2);font-weight:500}
.form-grid .input,.form-grid select,.form-grid input{height:var(--control);
  padding:var(--sp-1) var(--sp-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  width:100%;background:#fff;outline:none;font-size:var(--fs-l2);line-height:24px;
  transition:border-color .18s,box-shadow .18s}
.form-grid .input:focus,.form-grid select:focus,.form-grid input:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-ring)}
.hint{font-size:var(--fs-l1);line-height:16px;color:var(--ink3);margin-top:var(--sp-1)}
.dropzone{border:1px dashed #C9CDD4;border-radius:var(--radius-sm);background:var(--surface);
  padding:var(--sp-4);text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.dropzone:hover,.dropzone.over{border-color:var(--primary);background:var(--primary-soft)}
.dropzone .big{font-size:var(--fs-l3);font-weight:600;margin-bottom:var(--sp-1)}
.dropzone .small{font-size:var(--fs-l1);color:var(--ink2)}
.progress{height:var(--sp-h);background:#F2F3F5;border-radius:var(--sp-h);overflow:hidden;
  margin-top:var(--sp-2)}
.progress i{display:block;height:100%;width:0;border-radius:var(--sp-1);
  background:var(--primary);transition:width .3s var(--ease)}
.log{background:var(--canvas);color:var(--ink2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:var(--sp-2);font-size:var(--fs-l1);line-height:20px;
  max-height:200px;overflow:auto;font-family:var(--font-mono);white-space:pre-wrap}

/* ------------------------------------------------------------------ 提示 / 文档 */
.notice{border-left:3px solid var(--primary);background:var(--primary-soft);
  padding:var(--sp-1) var(--sp-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:var(--fs-l1);line-height:20px;color:var(--ink2);margin-bottom:var(--sp-2)}
.notice b{color:var(--primary);font-weight:600}
.notice.warn{border-left-color:var(--warn);background:var(--warn-soft);color:#7A4A00}
.notice.warn b{color:var(--warn)}
.notice.danger{border-left-color:var(--danger);background:var(--danger-soft);color:#9B241A}
.notice.danger b{color:var(--danger)}
.code{background:var(--primary-soft);border:1px solid #C7E0FF;border-radius:var(--sp-h);
  padding:0 var(--sp-1);font-family:var(--font-mono);font-size:var(--fs-l1);color:var(--primary)}
.doc h3{font-size:var(--fs-l3);line-height:24px;margin:var(--sp-3) 0 var(--sp-1);font-weight:600}
.doc p,.doc li{font-size:var(--fs-l2);line-height:24px;color:var(--ink2)}
.doc ol,.doc ul{padding-left:var(--sp-3)}
.doc .flow-box,.flow-box{background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:var(--sp-2);margin:var(--sp-1) 0;font-size:var(--fs-l1);line-height:20px;color:var(--ink2)}

/* ------------------------------------------------------------------ Toast / Modal / 抽屉 */
.toast-host{position:fixed;right:var(--contentPadding);top:calc(var(--header) + var(--workflow) + var(--sp-2));
  z-index:400;display:flex;flex-direction:column;gap:var(--sp-1);pointer-events:none}
.toast{background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-left:3px solid var(--primary);box-shadow:var(--shadow-lift);
  border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-2);font-size:var(--fs-l1);
  line-height:20px;min-width:264px;max-width:420px;pointer-events:auto;
  animation:toastIn .32s var(--ease) both}
.toast.ok{border-left-color:var(--ok)}
.toast.warn{border-left-color:var(--warn)}
.toast.err{border-left-color:var(--danger)}
.toast.toast-out{animation:toastOut .24s var(--ease) forwards}
.modal-mask{position:fixed;inset:0;background:rgba(29,33,41,.45);z-index:300;
  display:flex;align-items:center;justify-content:center;padding:var(--sp-3);
  animation:fadeIn .2s var(--ease) both}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  width:min(760px,100%);max-height:86vh;overflow:auto;
  box-shadow:0 28px 80px rgba(29,33,41,.24);animation:modalIn .28s var(--ease) both}
.modal-head{height:var(--header);padding:0 var(--sp-3);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-weight:600;font-size:var(--fs-l3);background:var(--surface)}
.modal-body{padding:var(--sp-3)}
.modal-foot{height:var(--space-64);padding:0 var(--sp-3);border-top:1px solid var(--line);
  display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-1);background:var(--surface)}
.modal .table-wrap{max-height:none}
.drawer{position:fixed;top:0;right:0;bottom:0;width:var(--drawer);background:var(--surface);
  border-left:1px solid var(--line);z-index:300;display:flex;flex-direction:column}
.drawer.verify{width:var(--verificationDrawer)}
.drawer .modal-head,.drawer .modal-foot{flex:none}
.drawer .modal-body{flex:1;overflow:auto}
.x{cursor:pointer;color:var(--ink3);font-size:var(--fs-l4);line-height:1;transition:color .18s}
.x:hover{color:var(--primary)}
/* 右侧抽屉（P04 新建/导入 · P07 新增/编辑 · P09 核对详情 · P11 账号表单） */
.modal-mask.drawer-mask{justify-content:flex-end;padding:0;align-items:stretch}
.modal-mask.drawer-mask .drawer{animation:drawerIn .28s var(--ease) both;height:100%;max-width:92vw}
@keyframes drawerIn{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
.drawer .field{margin-bottom:var(--sp-2)}
.drawer .field>label{display:block;font-size:var(--fs-l1);line-height:16px;color:var(--ink2);
  font-weight:500;margin-bottom:var(--sp-h)}
.drawer .field input,.drawer .field select,.drawer .field textarea{width:100%;height:var(--control);
  padding:var(--sp-1) var(--sp-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;outline:none;font-size:var(--fs-l2);line-height:24px;color:var(--ink);
  transition:border-color .18s,box-shadow .18s}
.drawer .field textarea{height:auto;min-height:88px;resize:vertical;padding-top:var(--sp-1)}
.drawer .field input:focus,.drawer .field select:focus,.drawer .field textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
.drawer .ferr{color:var(--danger);font-size:var(--fs-l1);line-height:16px;margin-top:var(--sp-h)}
.drawer .drawer-card{border:1px solid var(--line);border-radius:var(--radius-card);
  padding:var(--sp-2);margin-bottom:var(--sp-2)}
.drawer .drawer-card .card-title{font-size:var(--fs-l2)}
/* P03 执行阶段横向步骤条：取数 → 传输 → 校验 → 写入 */
.imp-steps{display:flex;align-items:center;margin:var(--sp-1) 0 var(--sp-2);flex-wrap:nowrap}
.imp-step{display:flex;align-items:center;min-width:0}
.imp-dot{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--canvas);
  color:var(--ink3);display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-l1);flex:none;transition:all .2s var(--ease)}
.imp-step .t{margin-left:var(--sp-h);font-size:var(--fs-l1);line-height:16px;color:var(--ink2);white-space:nowrap}
.imp-step .t b{font-weight:500;color:var(--ink)}
.imp-line{width:32px;height:1px;background:var(--line);margin:0 var(--sp-1);flex:none;transition:background .2s}
.imp-step.done .imp-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.imp-step.done .imp-line{background:var(--ok)}
.imp-step.cur .imp-dot{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-ring)}
.imp-step.cur .t b{color:var(--primary)}
.imp-stage{font-size:var(--fs-l1);color:var(--ink2)}
/* 导入前变更概览（新增 / 变化 / 移除 / 保持不变） */
.diff-tile{display:inline-flex;align-items:center;margin-right:var(--sp-2);font-size:var(--fs-l1);color:var(--ink2)}
.diff-tile i{font-style:normal;border-radius:var(--sp-h);padding:0 var(--sp-h);font-weight:600}
/* 批量选择（P09 批量确认：选中后展示数量） */
.batch-bar{display:inline-flex;align-items:center;gap:var(--sp-h);font-size:var(--fs-l1);color:var(--ink2)}
.batch-bar b{color:var(--ink);font-family:var(--font-num)}
td input[type=checkbox],.batch-bar input[type=checkbox]{width:14px;height:14px;accent-color:var(--primary);
  cursor:pointer;vertical-align:middle}
@media(max-width:1100px){
  .imp-step .t .d{display:none}
}

/* ------------------------------------------------------------------ 视图切换 */
.view-switch{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;margin-right:var(--sp-1);flex:none;background:var(--surface)}
.view-switch .btn{border:0;border-radius:0;height:var(--tableRow);padding:0 var(--sp-2);font-size:var(--fs-l1)}
.view-switch .btn+.btn{border-left:1px solid var(--line)}
.view-switch .btn-primary,.view-switch .btn-primary:hover{background:var(--primary);
  border-color:var(--primary);color:#fff}

/* ------------------------------------------------------------------ 日月报表示例样式
 * 这一段刻意保持「Excel 台账」观感（黑体 / 宋体、全边框、纯白底），
 * 不受企业后台主题影响，便于与导出的 xlsx 逐格对照。 */
.tpl-sheet{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-2)}
.tpl-period{font-family:SimHei,"黑体","Microsoft YaHei",sans-serif;font-size:13px;
  color:#1a1a1a;margin:var(--sp-h) 0 var(--sp-1)}
.tpl-period.daily{font-family:SimHei,"黑体","Microsoft YaHei",sans-serif}
.tpl-period.month{font-family:SimSun,"宋体",serif;font-size:11px}
.tpl-period span,.tpl-period b{font-weight:400}
.tpl-wrap{overflow:auto;max-height:68vh;border:1px solid #9ba3ad;background:#fff}
.tpl-modal .tpl-wrap{max-height:52vh}
.tpl-modal .tpl-sheet{border:0;padding:0}
table.tpl{width:auto;min-width:100%;border-collapse:collapse;table-layout:auto;font-size:11px;color:#000;
  background:#fff;font-family:SimHei,"黑体","Microsoft YaHei",sans-serif}
table.tpl.daily{font-family:SimHei,"黑体","Microsoft YaHei",sans-serif}
table.tpl.month{font-family:SimSun,"宋体",serif}
table.tpl th,table.tpl td{border:1px solid #9ba3ad;padding:4px 7px;text-align:center;vertical-align:middle;
  white-space:nowrap;background:#fff;color:#000;font-weight:400;height:23px;position:static;top:auto;
  z-index:auto;box-shadow:none;font-size:11px;letter-spacing:normal}
table.tpl th{position:sticky;top:0;z-index:3;background:#fff}
table.tpl th.tpl-fixed,table.tpl td.tpl-fixed{background:#fff}
table.tpl tbody tr:hover td,table.tpl tbody tr:hover td:first-child{background:#fff;box-shadow:none}
table.tpl tr.diff-add>td,table.tpl tr.diff-change>td,table.tpl tr.diff-del>td{background:#fff}
table.tpl tbody tr:last-child td{border-bottom:1px solid #9ba3ad}
table.tpl td.tpl-subject{white-space:nowrap}
table.tpl .empty{color:var(--ink3);background:#fff}

/* ------------------------------------------------------------------ 动效（轻微、不改变布局） */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes modalIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(16px)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.page-enter>*{animation:rise .28s var(--ease) backwards}
/* 注：不能用 fill-mode both —— 结束后仍保留 transform 会让 .table-wrap 成为
   fixed 后代的包含块，行操作菜单会被表格滚动容器裁切而“点不开”。 */
.page-enter>:nth-child(2){animation-delay:.04s}
.page-enter>:nth-child(3){animation-delay:.08s}
.page-enter>:nth-child(n+4){animation-delay:.12s}

/* ------------------------------------------------------------------ 打印 */
.print-area{display:none}
@media print{
  body>*:not(.print-area){display:none!important}
  .print-area{display:block!important;padding:0;color:#000}
  .print-area h1{font-size:18px;text-align:center;margin:0 0 6px}
  .print-area .p-sub{text-align:center;font-size:12px;margin-bottom:14px}
  .print-area table{font-size:11px;border:1px solid #000}
  .print-area th,.print-area td{border:1px solid #000;padding:5px 7px;color:#000}
  .print-area .sign{margin-top:26px;font-size:12px;display:flex;justify-content:space-between}
}

/* ------------------------------------------------------------------ 响应式：<1280 侧栏折叠为 64px；表格保留横向滚动 */
@media(max-width:1279px){
  .sidebar{width:var(--space-64)}
  .content{left:var(--space-64);padding:var(--sp-2)}
  .nav-group{display:none}
  .nav-item{justify-content:center;padding:0}
  .nav-txt,.sidebar-foot{display:none}
  .nav-item i{font-size:var(--fs-l3)}
  .app-title::after{display:none}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wf-state,.wf-arrow{display:none}
  .wf-period{display:none}
  .topbar,.workflow{padding:0 var(--sp-2)}
}
@media(max-width:1100px){
  .step-flow,.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login-shell{grid-template-columns:minmax(0,1fr) minmax(400px,42%)}
  .login-aside{padding:var(--sp-5)}
  .login-aside h2{font-size:var(--fs-l4);line-height:32px;white-space:normal}
}
@media(max-width:980px){
  .nav-toggle-btn{display:flex}
  /* 窄屏顶栏只保留品牌、周期与必要操作；连接状态仍在侧栏底部可见 */
  .env-tag,.user-label,.period-select>span{display:none}
  .topbar-right{gap:var(--sp-1)}
  .sidebar{position:fixed;top:calc(var(--header) + var(--workflow));left:0;bottom:0;
    width:var(--sidebar);z-index:40;transform:translateX(-102%);
    transition:transform .28s var(--ease);box-shadow:14px 0 36px rgba(29,33,41,.16)}
  #appView.nav-open .sidebar{transform:none}
  .sidebar .nav-group,.sidebar .nav-txt,.sidebar .sidebar-foot{display:block}
  .sidebar .nav-item{justify-content:flex-start;padding:0 var(--sp-2)}
  .content{left:0}
  .nav-scrim{display:block;position:fixed;inset:calc(var(--header) + var(--workflow)) 0 0;
    background:rgba(29,33,41,.42);z-index:35;opacity:0;pointer-events:none;transition:opacity .25s}
  #appView.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  .login-shell{grid-template-columns:minmax(0,1fr);justify-items:center}
  .login-aside{display:none}
  .login-main{padding:var(--sp-4) var(--sp-2)}
  .login-wrap{min-height:100vh;height:auto}
  .login-card{max-width:400px}
}
@media(max-width:860px){
  .period-select>span,.user-label{display:none}
  .grid-2,.grid-3,.grid-4,.form-grid,.step-flow{grid-template-columns:1fr}
  .stat-strip{gap:0 var(--sp-2)}
  .wf-node .wf-txt{display:none}
  .wf-nodes{gap:var(--sp-1)}
}
@media(max-width:760px){
  .content{padding:var(--sp-1)}
  .card{padding:var(--sp-1)}
  .page-head h2{font-size:var(--fs-l4);line-height:32px}
  .period-select select{min-width:0;width:152px;font-size:var(--fs-l1)}
  .topbar-left,.topbar-right{gap:var(--sp-1)}
  .kpi .value{font-size:var(--fs-l3)}
  .login-topbar{padding:0 var(--sp-2)}
}
@media(max-width:520px){
  .topbar{padding:0 var(--sp-1)}
  .app-title{display:none}
  .workflow{padding:0 var(--sp-1)}
  .wf-label{display:none}
  .btn{padding:0 var(--sp-1)}
  .toast-host{right:var(--sp-1);left:var(--sp-1)}
  .toast{min-width:0;max-width:none}
  .login-copyright{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ===== 图示对齐补充（20261107n）：状态条 / 日志表格 / 内联统计 / 分页脚 / 空态 / 图例 / 行菜单 ===== */
/* P03 服务状态条：在线状态一行呈现，技术信息折叠 */
.relay-strip{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface-2, #F7F8FA);font-size:var(--fs-l2);color:var(--ink2)}
.relay-strip.on{background:#F0F7FF;border-color:#BAD5FF}
.relay-strip.off{background:#FFF1F0;border-color:#FFC2BD}
.relay-strip b{color:var(--ink);font-size:var(--fs-l3)}
.relay-strip .rs-dot{width:8px;height:8px;border-radius:50%;background:var(--ink3);flex:none}
.relay-strip.on .rs-dot{background:var(--ok);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.relay-strip.off .rs-dot{background:var(--danger);box-shadow:0 0 0 3px rgba(229,72,77,.15)}
.relay-strip .rs-sep{color:var(--ink3)}
.relay-strip .rs-spacer{flex:1}
.relay-strip .rs-tech summary{cursor:pointer;color:var(--primary);font-size:var(--fs-l1);user-select:none}
.relay-strip .rs-tech[open] summary{margin-bottom:var(--sp-1)}
.relay-strip .rs-tech .table-wrap{min-width:320px;background:var(--surface);border-radius:var(--radius-sm)}
/* P03 执行日志表格 */
.log-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-l2)}
.log-tbl th{position:sticky;top:0;background:var(--surface-2, #F7F8FA);text-align:left;
  font-weight:500;color:var(--ink2);padding:var(--sp-h) var(--sp-2);border-bottom:1px solid var(--line);white-space:nowrap}
.log-tbl td{padding:var(--sp-h) var(--sp-2);border-bottom:1px solid var(--line);vertical-align:top}
.log-tbl td.num{text-align:right;white-space:nowrap}
.log-tbl tr:first-child td{color:var(--ink)}
/* 内联统计条（P04/P07/P08/P09/P10/P11 页头下方）：浅底一行多组 label+数值 */
.meta-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-4);
  background:var(--surface-2, #F7F8FA);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2)}
.meta-strip .mi{display:inline-flex;align-items:baseline;gap:var(--sp-h);font-size:var(--fs-l2);color:var(--ink2)}
.meta-strip .mi b{color:var(--ink);font-family:var(--font-num);font-weight:600;font-size:var(--fs-l3)}
.meta-strip .mi .warn{color:var(--warn)}
.meta-strip .mi .bad{color:var(--danger)}
.meta-strip .mi .ok{color:var(--ok)}
/* 表格分页脚：共 X 条记录 · 每页选择 · pager */
.tbl-foot{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);
  font-size:var(--fs-l2);color:var(--ink2);flex-wrap:wrap}
.tbl-foot .spacer{flex:1}
.tbl-foot select{height:32px;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:0 var(--sp-h);background:var(--surface);color:var(--ink2);font-size:var(--fs-l2)}
/* 居中空态：图标 + 标题 + 说明 + 主操作 */
.empty-hero{text-align:center;padding:var(--sp-7) var(--sp-4);color:var(--ink2)}
.empty-hero .ico{font-size:34px;line-height:1;margin-bottom:var(--sp-2);color:var(--ink3)}
.empty-hero h4{margin:0 0 var(--sp-h);font-size:var(--fs-l4);color:var(--ink)}
.empty-hero p{margin:0 0 var(--sp-3);font-size:var(--fs-l2)}
/* P08 图例 chips */
.legend-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:center;
  margin:var(--sp-2) 0;font-size:var(--fs-l1);color:var(--ink2)}
.legend-chips .lg{display:inline-flex;align-items:center;gap:var(--sp-h)}
.legend-chips .lg i{width:10px;height:10px;border-radius:3px;display:inline-block;font-style:normal}
/* P11 行操作 ⋯ 菜单 */
.row-menu-wrap{position:relative;display:inline-block}
.row-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:60;min-width:132px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lift);padding:4px;display:none}
.row-menu.open{display:block}
.row-menu button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:8px 10px;border-radius:6px;font:400 var(--fs-l2) var(--font-body);color:var(--ink)}
.row-menu button:hover{background:var(--surface-2, #F7F8FA)}
.row-menu button.danger{color:var(--danger)}

/* =====================================================================
 * V3 · 图示对齐（20261107o）
 * 逐页比对 8 张源图后统一：标题与副标题同行、内联统计去卡片、
 * 表格直接铺在白色画布上（表头浅灰 40px / 行 32px）、分页脚统一、
 * 行内复选框与选中态、单元格考勤语义底色、行操作菜单脱离表格裁切。
 * ===================================================================== */

/* ---------- 顶栏：品牌 · 工作区 · 薪资期间 · 服务器 · 用户菜单 ---------- */
.topbar{background:#fff}
.app-title::after{display:none}
.brand-div{width:1px;height:14px;background:var(--line);flex:none;margin:0 0 0 var(--sp-h)}
.app-sub{font-size:var(--fs-l2);line-height:24px;color:var(--ink2);white-space:nowrap}
.env-tag{background:none;border:0;padding:0;font-size:var(--fs-l1);line-height:16px;
  color:var(--ok);gap:var(--sp-h);font-weight:400}
.env-tag .dot{display:none}
.env-tag::before{width:6px;height:6px;box-shadow:0 0 0 3px rgba(0,135,90,.12)}
.env-tag.offline::before{box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.env-tag.unknown::before{box-shadow:none}
.period-select{font-size:var(--fs-l2);gap:var(--sp-h)}
.period-select select{min-width:0;max-width:280px;height:var(--tableRow);font-size:var(--fs-l2);
  border-color:transparent;background-color:transparent}
.period-select select:hover{border-color:var(--line)}
.user-menu-wrap{position:relative;flex:none}
.user-btn{display:inline-flex;align-items:center;gap:var(--sp-h);height:32px;padding:0 var(--sp-1);
  border:0;border-radius:var(--radius-sm);background:none;cursor:pointer;
  font-size:var(--fs-l2);color:var(--ink);white-space:nowrap}
.user-btn svg{width:16px;height:16px;color:var(--ink2);flex:none}
.user-btn svg.caret{width:14px;height:14px;color:var(--ink3);transition:transform .18s}
.user-btn:hover{background:#F2F3F5}
.user-btn[aria-expanded="true"] svg.caret{transform:rotate(180deg)}
.user-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:200;min-width:176px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);padding:var(--sp-h);display:none}
.user-menu.open{display:block}
.user-menu button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:var(--sp-1) 10px;border-radius:6px;font-size:var(--fs-l2);color:var(--ink)}
.user-menu button:hover{background:#F2F3F5}
.user-menu button.danger{color:var(--danger)}
.um-sep{height:1px;background:var(--line);margin:var(--sp-h) 0}
.user-label{display:none}

/* ---------- 流程条：胶囊节点，当前节点蓝框浅蓝底 ---------- */
.wf-label{font-size:var(--fs-l2);font-weight:500}
.wf-period{display:none}
.wf-node{height:26px;padding:0 var(--sp-1);border-radius:var(--radius-sm);gap:var(--sp-h)}
.wf-node[data-state="current"]{box-shadow:0 0 0 1px var(--primary) inset}
.wf-state::before{content:"(";margin-right:1px}
.wf-state::after{content:")";margin-left:1px}

/* ---------- 正文画布：白色，表格直接铺开 ---------- */
.content{background:#fff;padding:var(--sp-3) var(--sp-3) var(--sp-4)}
.page-head{align-items:center;border-bottom:0;padding-bottom:0;margin-bottom:var(--sp-2);gap:var(--sp-2)}
.page-head .hd-main{display:flex;align-items:center;gap:var(--sp-2);min-width:0;flex:1 1 auto}
.page-head h2{font-size:var(--fs-l5);line-height:32px;flex:none;margin:0}
.page-head .hd-sep{width:1px;height:12px;background:var(--line);flex:none}
.page-head .sub{margin:0;font-size:var(--fs-l2);line-height:22px;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-head .sub b{font-weight:500;color:var(--ink2)}
.page-head .actions{padding-bottom:0;gap:var(--sp-1);align-self:center}

/* ---------- 内联统计：无底色无边框，竖线分隔 ---------- */
.meta-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) 0;
  background:none;border:0;border-radius:0;padding:0;margin:0 0 var(--sp-2)}
.meta-strip .mi{display:inline-flex;align-items:center;gap:var(--sp-h);padding:0 var(--sp-2);
  border-left:1px solid var(--line);font-size:var(--fs-l2);line-height:22px;color:var(--ink2)}
.meta-strip .mi:first-child{border-left:0;padding-left:0}
.meta-strip .mi b{color:var(--ink);font-family:var(--font-num);font-weight:600;font-size:var(--fs-l3)}
.meta-strip .mi .u{color:var(--ink3);font-size:var(--fs-l1)}
.meta-strip .mi .ok{color:var(--ok)}
.meta-strip .mi .warn{color:var(--warn)}
.meta-strip .mi .bad,.meta-strip .mi .danger{color:var(--danger)}
.meta-strip .mi svg{width:16px;height:16px;color:var(--ink3);flex:none}

/* ---------- 表格：去外框，表头浅灰，分页脚贴底 ---------- */
#pageContent .card:has(> .table-wrap),#pageContent .card:has(> table){
  border:0;border-radius:0;background:transparent;padding:0;box-shadow:none;margin-bottom:var(--sp-3)}
#pageContent .card:has(> .table-wrap):hover,#pageContent .card:has(> table):hover{border:0}
#pageContent .card:has(> .table-wrap)>.card-title,#pageContent .card:has(> table)>.card-title{
  padding:0;margin:0 0 var(--sp-2)}
.card-title::before{display:none}
.card-title{font-size:var(--fs-l3)}
.card-sub{margin-bottom:var(--sp-1)}
.table-wrap{border:0;border-radius:0;background:transparent}
.table-wrap>table{border:0}
.table-tools{margin-bottom:var(--sp-2)}
.tbl-foot{margin-top:0;padding:var(--sp-2) 0 0;border:0;font-size:var(--fs-l2);color:var(--ink2)}
.tbl-foot .pager{margin:0 0 0 auto}
.pg{display:inline-flex;align-items:center;gap:var(--sp-1)}
.pg button{min-width:32px;height:32px;padding:0 var(--sp-1);border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;color:var(--ink2);
  font-size:var(--fs-l2);font-family:var(--font-num);cursor:pointer;transition:.16s}
.pg button:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.pg button.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pg button:disabled{color:#C9CDD4;cursor:not-allowed}
.pg .dots{color:var(--ink3);padding:0 var(--sp-h);min-width:0;border:0;background:none}
.pg select{height:32px;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:0 var(--sp-1);background:#fff;color:var(--ink2);font-size:var(--fs-l2);cursor:pointer}

/* ---------- 行复选框与选中态 ---------- */
td.cbx,th.cbx{width:40px;padding:0 0 0 var(--sp-2);text-align:left}
td.cbx input,th.cbx input{width:14px;height:14px;accent-color:var(--primary);cursor:pointer;
  vertical-align:middle;margin:0}
tbody tr.sel>td{background:var(--primary-soft)}
tbody tr.sel:hover>td{background:#DEEEFF}

/* ---------- 考勤语义单元格底色（P06 / P08） ---------- */
td.cell-rest{background:#F7F8FA;color:var(--ink3)}
td.cell-late{background:#FFF7E6;color:var(--warn)}
td.cell-miss{background:#FEF0EF;color:var(--danger)}
td.cell-future{background:#FCFCFD;color:#C9CDD4}
td.cell-none{color:var(--ink3)}
.cell-tag{display:inline-flex;align-items:center;gap:var(--sp-h);white-space:nowrap}
.cell-tag i{font-style:normal;width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- 行操作菜单：fixed 定位，避免被表格滚动容器裁切 ---------- */
.row-menu-wrap{position:static}
.row-menu{position:fixed;right:auto;top:auto;z-index:250;min-width:160px;
  background:var(--panel,#fff);box-shadow:0 8px 28px rgba(29,33,41,.14);padding:var(--sp-h)}
.row-menu button{padding:var(--sp-1) 10px;font-size:var(--fs-l2)}
.row-menu button svg{width:14px;height:14px;margin-right:var(--sp-h);vertical-align:-2px;color:var(--ink3)}
.row-menu button:disabled{color:#C9CDD4;cursor:not-allowed}
.row-menu button:disabled:hover{background:none}
.row-link{background:none;border:0;padding:0;color:var(--primary);font-size:var(--fs-l2);cursor:pointer}
.row-link:hover{color:var(--primary-hover);text-decoration:underline}
.row-link.danger{color:var(--danger)}

/* ---------- 页内分区标题（P03 执行进度 / 执行日志 等） ---------- */
.sec-title{display:flex;align-items:center;gap:var(--sp-1);margin:var(--sp-4) 0 var(--sp-2);
  font-size:var(--fs-l3);line-height:24px;font-weight:600;color:var(--ink)}
.sec-title:first-child{margin-top:0}

/* ---------- P02 工作台：一行大数字统计 / 两栏分区 ---------- */
.stat-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2) var(--sp-4);margin:0 0 var(--sp-3)}
.stat-row .st{display:flex;flex-direction:column;gap:0;min-width:0}
.stat-row .st b{font-family:var(--font-num);font-size:var(--fs-l4);line-height:28px;
  font-weight:600;color:var(--ink);letter-spacing:0}
.stat-row .st span{font-size:var(--fs-l2);line-height:20px;color:var(--ink3)}
.stat-row .st.hl b{color:var(--warn)}
.stat-row .st.bad b{color:var(--danger)}
.stat-row .grow{flex:1}
.period-line{display:flex;align-items:center;gap:var(--sp-1);margin:0 0 var(--sp-1);
  font-size:var(--fs-l2);color:var(--ink2)}
.period-line b{font-weight:600;color:var(--ink)}
.two-col{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--sp-4);align-items:start}
@media(max-width:1180px){.two-col{grid-template-columns:minmax(0,1fr)}}
.todo-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  color:var(--ink3);flex:none;margin-right:var(--sp-1)}
.todo-ico svg{width:16px;height:16px}
.todo-ico.warn{color:var(--warn)}

/* ---------- P03 数据拉取：状态行 / 参数行 / 四阶段执行区 ---------- */
.relay-strip{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);
  padding:0;border:0;background:none;border-radius:0;font-size:var(--fs-l2);color:var(--ink2);
  margin-bottom:var(--sp-2);line-height:24px}
.relay-strip.on,.relay-strip.off{background:none;border:0}
.relay-strip .rs-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px rgba(0,135,90,.12)}
.relay-strip.off .rs-dot{background:var(--danger);box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.relay-strip b{font-weight:400;font-size:var(--fs-l2);color:var(--ink2)}
.relay-strip .rs-txt{color:var(--ink3)}
.relay-strip .rs-sep{color:var(--line)}
.relay-strip .rs-tech{position:relative}
.relay-strip .rs-tech summary{cursor:pointer;color:var(--primary);font-size:var(--fs-l2);
  user-select:none;list-style:none;display:inline-flex;align-items:center;gap:var(--sp-h)}
.relay-strip .rs-tech summary::-webkit-details-marker{display:none}
.relay-strip .rs-tech summary::after{content:"▾";color:var(--ink3);font-size:10px}
.relay-strip .rs-tech[open] summary::after{content:"▴"}
.relay-strip .rs-tech .table-wrap{position:absolute;right:0;top:calc(100% + 6px);z-index:180;
  min-width:360px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);padding:var(--sp-1);max-height:320px}
.relay-params{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-2)}
.relay-params .pp{display:inline-flex;align-items:center;gap:var(--sp-h);font-size:var(--fs-l2);color:var(--ink2)}
.relay-params .pp select{height:var(--tableRow);min-width:228px;padding:0 var(--sp-1);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  font-size:var(--fs-l2);color:var(--ink);cursor:pointer}
.relay-params .pp-txt{font-size:var(--fs-l2);color:var(--ink2)}
.relay-params .pp-txt b{font-weight:500;color:var(--ink)}
.relay-params .grow{flex:1}
.relay-adv{margin:0 0 var(--sp-2);font-size:var(--fs-l1);color:var(--ink3)}
.relay-adv summary{cursor:pointer;color:var(--ink3);font-size:var(--fs-l1);list-style:none;
  display:inline-flex;align-items:center;gap:var(--sp-h)}
.relay-adv summary::-webkit-details-marker{display:none}
.relay-adv summary::after{content:"▾";font-size:10px}
.relay-adv[open] summary::after{content:"▴"}
.exec-block{border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--sp-3);
  margin-bottom:var(--sp-2);background:#fff}
.exec-row{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.exec-row .exec-pct{font-size:var(--fs-l2);color:var(--ink2);white-space:nowrap}
.exec-row .exec-pct b{font-family:var(--font-num);font-weight:600;color:var(--ink)}
.exec-row .progress{flex:1;height:8px;background:#F2F3F5;border-radius:4px;overflow:hidden;max-width:none}
.exec-row .progress i{display:block;height:100%;width:0;background:var(--primary);border-radius:4px;
  transition:width .3s var(--ease)}
.exec-block .imp-stage{margin-top:var(--sp-1);font-size:var(--fs-l1);color:var(--ink3)}
.log-plain{border:0;background:none;padding:0;overflow:auto;max-height:420px}
.log-plain table{width:100%}
.log-plain .log-tbl th{background:#F7F8FA}
.log-plain .log-tbl td{font-size:var(--fs-l2)}
/* 四阶段步骤条：圆点在横线上、文字在圆点下方（图示 P03） */
.imp-steps{display:flex;align-items:stretch;margin:var(--sp-1) 0 0}
.imp-step{display:flex;flex-direction:column;min-width:0;flex:1}
.imp-head{display:flex;align-items:center;height:22px}
.imp-dot{width:22px;height:22px;border-radius:50%;border:1px solid #C9CDD4;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-l1);
  font-family:var(--font-num);color:var(--ink3);flex:none;transition:.2s}
.imp-line{flex:1;height:1px;background:var(--line);margin:0 var(--sp-2);min-width:16px}
.imp-step .t{margin-top:var(--sp-1);padding-right:var(--sp-2);font-size:var(--fs-l2);color:var(--ink2);min-width:0}
.imp-step .t b{font-weight:500;color:var(--ink);display:block;white-space:nowrap}
.imp-step .t .d{display:block;font-size:var(--fs-l1);line-height:16px;color:var(--ink3);margin-top:2px;
  white-space:normal}
.imp-step.done .imp-dot{background:var(--ok);border-color:var(--ok);color:#fff;font-size:0}
.imp-step.done .imp-dot::after{content:"✓";font-size:12px;line-height:1}
.imp-step.done .imp-line{background:var(--primary)}
.imp-step.cur .imp-dot{border:2px solid var(--primary);color:var(--primary);font-weight:600;font-size:11px}
.imp-step.cur .t b{color:var(--primary)}

/* ---------- 工具栏（P05/P06/P07/P09）：标签 + 搜索框 + 下拉 + 右侧操作 ---------- */
.table-tools{align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-2)}
.tf-label{font-size:var(--fs-l2);color:var(--ink2);white-space:nowrap;margin-left:var(--sp-1)}
.tf-label:first-child{margin-left:0}
.tf-search{position:relative;display:inline-flex;align-items:center}
.tf-search svg{position:absolute;left:10px;width:14px;height:14px;color:var(--ink3);pointer-events:none}
.tf-search .input{padding-left:30px;width:200px}
.table-tools .input,.table-tools .select{height:var(--tableRow);font-size:var(--fs-l2);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink)}
.table-tools .input{min-width:180px;padding:0 var(--sp-1)}
.table-tools .select{min-width:112px;padding:0 var(--sp-1)}
.table-tools .btn{height:var(--tableRow);font-size:var(--fs-l2)}
.table-tools .btn svg{width:14px;height:14px;margin-right:var(--sp-h);vertical-align:-2px;color:var(--ink2)}
.btn svg{width:16px;height:16px;margin-right:var(--sp-h);vertical-align:-3px}
.grow{flex:1}
.lock-ico{font-size:12px;opacity:.65}
.sum-tbl td{padding:var(--sp-1) var(--sp-2);height:40px}
.sum-tbl td:last-child{font-family:var(--font-num);font-weight:500}

/* ---------- 页签（P06 / P08）：文字页签 + 底部蓝线 ---------- */
.tabs{display:flex;align-items:center;gap:var(--sp-3);border-bottom:1px solid var(--line);
  margin:0 0 var(--sp-2);padding:0}
.tabs .tab{position:relative;background:none;border:0;padding:var(--sp-1) 0 var(--sp-2);
  font-size:var(--fs-l3);font-weight:500;color:var(--ink2);cursor:pointer;margin-bottom:-1px}
.tabs .tab:hover{color:var(--primary)}
.tabs .tab.on{color:var(--primary);font-weight:600}
.tabs .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--primary);border-radius:2px}
.tabs .grow{flex:1}
.tabs .btn{margin-bottom:var(--sp-1)}
/* 日期范围控件：两输入合为一个胶囊 */
.date-range{display:inline-flex;align-items:center;gap:var(--sp-h);height:var(--tableRow);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:0 var(--sp-1)}
.date-range input{border:0;background:none;height:100%;font-size:var(--fs-l2);color:var(--ink);
  outline:none;width:118px;padding:0}
.date-range span{color:var(--ink3);font-size:var(--fs-l2)}

/* ---------- 抽屉内表单：必填星号 / 搜索框 / 单选 / 字数 / 底部说明 ---------- */
.drawer .field>label{font-size:var(--fs-l2);color:var(--ink);font-weight:400;margin-bottom:var(--sp-1)}
.drawer .field>label .req{color:var(--danger);font-style:normal;margin-left:2px}
.inp-icon{position:relative;display:flex;align-items:center}
.inp-icon svg{position:absolute;left:10px;width:14px;height:14px;color:var(--ink3);pointer-events:none}
.inp-icon .input{padding-left:30px;padding-right:30px}
.inp-clear{position:absolute;right:6px;width:20px;height:20px;border:0;background:none;
  color:var(--ink3);font-size:16px;line-height:1;cursor:pointer;border-radius:50%}
.inp-clear:hover{background:#F2F3F5;color:var(--ink)}
.emp-inline{margin-top:var(--sp-1);padding:var(--sp-h) var(--sp-1);background:#F7F8FA;
  border-radius:var(--radius-sm);font-size:var(--fs-l1);line-height:18px;color:var(--ink2)}
.emp-inline b{font-weight:500;color:var(--ink)}
.radio-row{display:flex;align-items:center;gap:var(--sp-3)}
.radio-row .radio{display:inline-flex;align-items:center;gap:var(--sp-h);font-size:var(--fs-l2);
  color:var(--ink);cursor:pointer}
.radio-row .radio input{width:14px;height:14px;accent-color:var(--primary);cursor:pointer;margin:0}
.drawer textarea{width:100%;min-height:80px;padding:var(--sp-1);border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:var(--fs-l2);line-height:22px;color:var(--ink);
  resize:vertical;outline:none;font-family:var(--font-body)}
.drawer textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
.char-count{text-align:right;font-size:var(--fs-l1);color:var(--ink3);margin-top:var(--sp-h)}
.drawer .field input.err{border-color:var(--danger)}
.drawer .ferr{color:var(--danger);font-size:var(--fs-l1);line-height:16px;margin-top:var(--sp-h)}
.drawer-note{display:flex;gap:var(--sp-h);align-items:flex-start;margin-top:var(--sp-2);
  font-size:var(--fs-l1);line-height:18px;color:var(--ink3)}
.drawer-note svg{width:14px;height:14px;flex:none;margin-top:2px}
.drawer .modal-foot{gap:var(--sp-1)}

/* ---------- P08 月报：生成状态行 / 图例 / 日历表 ---------- */
.rep-status{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-l1);color:var(--ink2)}
.rep-status .rs-txt b{font-family:var(--font-num);font-weight:600;color:var(--ink);font-size:var(--fs-l2)}
.rep-status .rs-done{display:inline-flex;align-items:center;gap:var(--sp-h);color:var(--ok)}
.rep-status .rs-done .ok{color:var(--ok)}
.rep-status .rs-done .warn{color:var(--warn)}
.rep-status .rs-bar{width:88px;height:6px;background:var(--line);border-radius:3px;overflow:hidden;display:inline-block}
.rep-status .rs-bar i{display:block;height:100%;width:0;background:var(--primary);border-radius:3px}
.rep-status .rs-pct{font-family:var(--font-num);font-size:var(--fs-l1);color:var(--ink2)}
.legend-chips{margin:0 0 var(--sp-2);gap:var(--sp-1) var(--sp-3);font-size:var(--fs-l1);color:var(--ink2)}
.legend-chips .lg i{width:12px;height:12px;border-radius:2px}
.cal-wrap{max-height:calc(100vh - 330px)}
.cal-tbl{font-size:var(--fs-l1)}
.cal-tbl th.day,.cal-tbl td.day{width:44px;min-width:44px;max-width:44px;padding:0 2px;
  text-align:center;font-size:var(--fs-l1);line-height:32px;white-space:nowrap}
.cal-tbl th.day{height:var(--tableHeader);line-height:20px;font-weight:500}
.cal-tbl th.day.future{color:#C9CDD4}
.cal-tbl th.ct,.cal-tbl td.ct{width:76px;min-width:76px;font-size:var(--fs-l1);text-align:center;color:var(--ink2)}
.cal-tbl td.dept{max-width:132px;overflow:hidden;text-overflow:ellipsis}
.cal-tbl tbody td{border-bottom:1px solid #F2F3F5;height:32px}
.cal-tbl tr.cal-r3 td{border-bottom:1px solid var(--line)}
.cal-tbl tbody tr:hover td{background:var(--primary-soft)}
.cal-tbl td.cell-rest{background:#F7F8FA}
.cal-tbl td.cell-late{background:#FFF7E6}
.cal-tbl td.cell-miss{background:#FEF0EF}
.cal-tbl td.cell-future{background:#FCFCFD;color:#C9CDD4}
.cal-tbl td.cell-none{color:#B4B9C2}
.cal-tbl tbody tr.cal-r1 td{border-top:1px solid var(--line)}

/* =====================================================================
 * P09 员工核对 / P10 存档管理 / P11 账号管理（20261107p）
 * ===================================================================== */

/* ---------- 统计条：带图标的状态语义色 ---------- */
.meta-strip .mi.ok svg{color:var(--ok)}
.meta-strip .mi.warn svg{color:var(--warn)}
.meta-strip .mi > svg{color:var(--ink3)}

/* ---------- 页内状态行：当前周期状态 + 右侧主动作 ---------- */
.ar-bar{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0}
.ar-bar .meta-strip{margin:0}
.ar-state{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-l2);color:var(--ink2)}
.st-blue{color:var(--primary);font-size:var(--fs-l2)}
.st-done{color:var(--ink2);font-size:var(--fs-l2)}
.arc-lock{width:13px;height:13px;vertical-align:-2px;color:var(--ink3);margin-right:2px}

/* ---------- 二次确认弹窗：说明行 / 信息盒 / 勾选行 ---------- */
.fz-lead{display:flex;gap:var(--sp-1);align-items:flex-start;font-size:var(--fs-l2);
  line-height:22px;color:var(--ink)}
.fz-lead svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--primary)}
.fz-lead b{font-weight:600}
.fz-box{border:1px solid var(--line);border-radius:var(--radius-sm);margin:var(--sp-2) 0;overflow:hidden}
.fz-row{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-2);min-height:40px;
  font-size:var(--fs-l2)}
.fz-row+.fz-row{border-top:1px solid #F2F3F5}
.fz-row span{color:var(--ink2);width:92px;flex:none}
.fz-row b{font-weight:500;color:var(--ink);font-family:var(--font-num)}
.ck-line{display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-1);
  font-size:var(--fs-l2);color:var(--ink);cursor:pointer}
.ck-line input{width:14px;height:14px;accent-color:var(--primary);margin:0;cursor:pointer}

/* ---------- P09 核对详情抽屉 ---------- */
.vf-id{padding-bottom:var(--sp-2);border-bottom:1px solid var(--line);margin-bottom:var(--sp-2)}
.vf-id-top{display:flex;align-items:center;gap:2px}
.vf-name{font-size:var(--fs-l3);font-weight:600;color:var(--ink);line-height:24px}
.vf-code{color:var(--ink2);font-size:var(--fs-l2)}
.vf-dept{margin-top:var(--sp-h);font-size:var(--fs-l2);color:var(--ink2)}
.vf-kv{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.vf-kv-row{display:flex;align-items:baseline;gap:var(--sp-1);padding:0 var(--sp-2);height:40px;
  line-height:40px;font-size:var(--fs-l2)}
.vf-kv-row+.vf-kv-row{border-top:1px solid #F2F3F5}
.vf-kv-row span{color:var(--ink2);flex:1}
.vf-kv-row b{font-family:var(--font-num);font-weight:600;font-size:var(--fs-l3);color:var(--ink)}
.vf-kv-row b.strong{color:var(--primary)}
.vf-kv-row i{font-style:normal;color:var(--ink3);font-size:var(--fs-l1);width:14px;text-align:right}
.vf-note-h{margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-l2);color:var(--ink)}

/* ---------- P11 密码显隐 / 行操作按钮 / 菜单图标 ---------- */
.inp-eye{position:absolute;right:6px;width:24px;height:24px;border:0;background:none;padding:0;
  color:var(--ink3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%}
.inp-eye:hover{color:var(--ink);background:#F2F3F5}
.inp-eye svg{width:15px;height:15px;margin:0}
.ac-act{display:inline-flex;align-items:center;gap:2px;height:26px;padding:0 var(--sp-1);
  font-size:var(--fs-l1)}
.ac-act svg{width:12px;height:12px;margin:0}
.ac-act[aria-expanded="true"] svg{transform:rotate(180deg)}
.row-menu button{display:flex;align-items:center}
.row-menu button svg{margin-right:var(--sp-1)}
.rm-info{margin-left:auto;display:inline-flex;color:var(--ink3)}
.rm-info svg{width:13px;height:13px;margin:0}

/* 页头信息图标（标题右侧 ⓘ） */
.page-head .hd-info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  color:var(--ink3);cursor:help;flex:none}
.page-head .hd-info svg{width:16px;height:16px;display:block}
.page-head .hd-info:hover{color:var(--ink2)}
/* P09 状态列：纯文字语义色（不带标签底） */
.vf-st{font-size:var(--fs-l2);white-space:nowrap}
.vf-st-pending{color:var(--ink2)}
.vf-st-confirmed{color:var(--ok)}
.vf-st-disputed{color:var(--danger)}

/* =====================================================================
 * P01 登录（手册 P01 / login.png 图示）
 * 蓝色全屏背景 + 右侧 400px 浅色登录卡片（内边距 32px）；
 * 左上 Haier 与 HAMT 标识、右上帮助中心；左列系统名 + 中文要点 + 英文辅助名；
 * 底部整页居中标识；登录前不显示业务导航与月结流程。
 * ===================================================================== */
.lg-page{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;
  background:linear-gradient(152deg,#4B70FF 0%,#4269FB 44%,#3A5CF2 100%);
  color:#fff;overflow:auto}

/* 背景装饰：深色圆弧、三角与右下斜纹，纯装饰不拦截事件 */
.lg-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lg-deco span{position:absolute;display:block}
.lgd-arc{width:510px;height:510px;left:-255px;top:-375px;border-radius:50%;
  background:rgba(24,44,166,.20)}
.lgd-tri1{width:300px;height:250px;left:56px;top:0;
  background:rgba(24,44,166,.14);clip-path:polygon(0 0,100% 0,0 100%)}
.lgd-arc2{width:170px;height:170px;left:44%;top:-104px;border-radius:50%;
  background:rgba(24,44,166,.16)}
.lgd-tri2{width:120px;height:104px;left:80%;top:-4px;
  background:rgba(24,44,166,.16);clip-path:polygon(50% 100%,0 0,100% 0)}
.lgd-tri3{width:190px;height:120px;left:0;bottom:0;
  background:repeating-linear-gradient(114deg,rgba(24,44,166,.16) 0 9px,rgba(24,44,166,0) 9px 22px);
  clip-path:polygon(0 100%,0 46%,100% 100%)}
.lgd-stripes{right:0;bottom:0;width:33%;height:46%;
  background:repeating-linear-gradient(114deg,rgba(255,255,255,.085) 0 13px,rgba(255,255,255,0) 13px 38px);
  clip-path:polygon(100% 4%,100% 100%,14% 100%)}

/* 顶部：品牌 + 帮助中心 */
.lg-top{position:relative;z-index:1;flex:none;display:flex;align-items:center;
  justify-content:space-between;padding:22px 40px 0}
.lg-brand{display:flex;align-items:center;gap:12px}
.lg-haier{height:26px;width:auto;display:block;opacity:.97}
.lg-brand-div{width:1px;height:18px;background:rgba(255,255,255,.5)}
.lg-brand-txt{font-size:14px;line-height:20px;letter-spacing:.04em;color:rgba(255,255,255,.94)}
.lg-help{border:0;background:none;padding:0;font:inherit;font-size:14px;line-height:20px;
  color:rgba(255,255,255,.9);cursor:pointer}
.lg-help:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* 主体：左列品牌文案 + 右侧登录卡片 */
.lg-body{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;
  align-items:center;justify-content:space-between;gap:48px;
  padding:24px 92px 0 clamp(80px,9.6vw,188px)}

.lg-hero{position:relative;flex:0 1 auto;max-width:620px;padding:8px 0}
.lg-h1{margin:0;font-size:clamp(40px,4.2vw,66px);line-height:1.34;font-weight:700;letter-spacing:.01em;
  color:#fff}   /* 手册例外：品牌展示标题 40/56 */
.lg-lead{margin:26px 0 0;font-size:18px;line-height:28px;letter-spacing:.11em;
  color:rgba(255,255,255,.94)}
.lg-en{margin:12px 0 0;font-size:15px;line-height:22px;letter-spacing:.14em;
  color:rgba(255,255,255,.76)}
/* 图示中的两个白色角标 */
.lg-frame{position:absolute;width:44px;height:44px;border:0 solid #fff;opacity:.96}
.lg-frame-tl{left:-52px;top:-38px;border-top-width:3px;border-left-width:3px}
.lg-frame-br{right:-72px;bottom:0;border-bottom-width:3px;border-right-width:3px}

/* 右侧浅色登录卡片：宽 400px、内边距 32px、浮动圆角 */
.lg-card{position:relative;flex:none;width:400px;background:#F6F7FB;
  border-radius:10px;padding:32px;box-shadow:0 12px 40px rgba(10,30,110,.20);color:var(--ink)}
.lg-form{width:100%}
.lg-title{margin:0;font-size:26px;line-height:34px;font-weight:600;color:#1D2129}
.lg-cap{margin:8px 0 26px;font-size:14px;line-height:20px;color:var(--ink3)}

.lg-field{margin-bottom:18px}
.lg-field>label{display:block;font-size:14px;line-height:20px;color:var(--ink2);
  margin-bottom:8px}
.lg-wrap{position:relative}
.lg-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:#A9B0BC;pointer-events:none}
.lg-input{width:100%;height:42px;border:1px solid #D8DDE6;border-radius:6px;
  background:#fff;padding:0 12px 0 38px;font-size:14px;color:var(--ink);outline:none}
.lg-input::placeholder{color:#A9B0BC}
.lg-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
.lg-input-pwd{padding-right:42px}
.lg-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  border:0;background:none;padding:0;color:var(--ink3);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;border-radius:4px}
.lg-eye svg{width:18px;height:18px;display:block}
.lg-eye .ico-eye-off{display:none}
.lg-eye.showing .ico-eye{display:none}
.lg-eye.showing .ico-eye-off{display:block}
.lg-eye:hover{background:#EDEFF5;color:var(--ink2)}
.lg-err:not(:empty){display:flex;align-items:center;gap:6px;margin-top:6px;
  color:var(--danger);font-size:13px;line-height:20px}
.lg-err:not(:empty)::before{content:"!";flex:none;width:14px;height:14px;border-radius:50%;
  background:var(--danger);color:#fff;font-size:10px;line-height:14px;text-align:center;font-weight:600}
.lg-login{width:100%;height:46px;margin-top:4px;border:0;border-radius:6px;
  background:var(--primary);color:#fff;font-size:16px;font-weight:500;letter-spacing:.06em;cursor:pointer}
.lg-login:hover{background:var(--primary-hover)}
.lg-login:active{background:var(--primary-active)}
.lg-login:disabled{opacity:.6;cursor:default}

.lg-notes{margin-top:18px;text-align:center}
.lg-notes p{margin:0;font-size:13px;line-height:22px;color:#86909C}
.lg-tlink{border:0;background:none;padding:0;font:inherit;font-size:13px;line-height:22px;
  color:#86909C;cursor:pointer;text-decoration:none}
.lg-tlink:hover{color:var(--primary)}
.lg-tlink-primary{color:var(--primary);font-size:14px}
.lg-tlink-primary:hover{text-decoration:underline;text-underline-offset:3px}
.lg-divider{height:1px;background:#E3E6EE;margin:18px 0}
.lg-extra{text-align:center;min-height:22px}

.lg-bs{margin-top:10px;max-height:46vh;overflow:auto;text-align:left}
.lg-bs .hint{font-size:12px;line-height:20px}

/* 底部整页居中标识 */
.lg-copy{position:relative;z-index:1;flex:none;text-align:center;font-size:13px;
  line-height:20px;letter-spacing:.06em;color:rgba(255,255,255,.82);padding:0 0 34px}

/* 窄屏：隐藏品牌文案区，卡片居中 */
@media (max-width:1080px){
  .lg-body{padding:24px 40px}
  .lg-hero{max-width:420px}
  .lg-frame{display:none}
}
@media (max-width:900px){
  .lg-body{align-items:center;justify-content:center;padding:16px}
  .lg-hero{display:none}
  .lg-card{width:100%;max-width:400px}
  .lg-top{padding:16px 20px 0}
}

/* 侧栏图标：统一 16px 线性 SVG */
.nav-item i.ni{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  font-size:0;color:var(--ink2)}
.nav-item i.ni svg{width:16px;height:16px;display:block}
.nav-item:hover i.ni,.nav-item.active i.ni{color:var(--primary)}

/* ---------- P02 工作台：统计同行（数字 + 标签并排）/ 分区间距 ---------- */
.stat-row{margin:var(--sp-2) 0 var(--sp-3);gap:var(--sp-1) var(--sp-5);align-items:center}
.stat-row .st{flex-direction:row;align-items:baseline;gap:var(--sp-1)}
.stat-row .st b{font-size:var(--fs-l4);line-height:28px}
.stat-row .st span{font-size:var(--fs-l2);line-height:20px;color:var(--ink2)}
.two-col{margin-top:var(--sp-3)}
.sec-title{margin:var(--sp-4) 0 var(--sp-2)}

/* P08 日历表：固定列宽，日期列 44px，超出横向滚动（与图示一致） */
.cal-tbl{table-layout:fixed;width:max-content;min-width:100%}
.cal-tbl th.fz,.cal-tbl td.fz{width:88px}
.cal-tbl th.fz2,.cal-tbl td.fz2{width:96px}
.cal-tbl th.dept,.cal-tbl td.dept{width:132px}

/* P06 逐日明细：窄列（日期 / 班次 / 打卡 / 工时），避免横向溢出 */
.tbl-daily th.c-date,.tbl-daily td.c-date{width:96px}
.tbl-daily th.c-shift,.tbl-daily td.c-shift{width:72px}
.tbl-daily th.c-punch,.tbl-daily td.c-punch{width:78px}
.tbl-daily th.c-hour,.tbl-daily td.c-hour{width:72px}

/* P03 数据拉取：参数行不换行、标签不折断 */
.relay-params{flex-wrap:nowrap;gap:var(--sp-2) var(--sp-3);overflow-x:auto}
.relay-params .pp,.relay-params .pp-txt{white-space:nowrap;flex:none}
.relay-params .pp>span{white-space:nowrap}

/* ---------- P09 备注列与操作列（20261108a） ---------- */
td.note,th.note{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink2)}
th.c-op,td.c-op{width:72px;text-align:right;padding-right:var(--sp-2)}
td.c-op .row-link{font-size:var(--fs-l2)}

/* 登录页底部：初始化入口与分隔线同排 */
#bootstrapEntry{display:inline-flex;align-items:center;gap:var(--sp-2)}

/* 工作台统计行：项间竖线分隔（图示 4,949 任职记录 | 3,907 日报覆盖 …） */
.stat-row .st+.st{border-left:1px solid var(--line);padding-left:var(--sp-3)}
.stat-row .st b{font-family:var(--font-num)}

/* P08 日历表：身份列贴齐每人首行（图示：工号/姓名/部门与「班次」行对齐） */
.cal-tbl td.fz,.cal-tbl td.fz2,.cal-tbl td.dept{vertical-align:top;padding-top:6px}

/* =====================================================================
 * 正文分层与配色校正（手册 P02 / P03 图示 · tokens.json）
 * 画布 #F7F8FA 只作页面底色；主体一律白卡片：白底 + 发丝边框 + 8px 圆角。
 *   1) .content 底色由纯白改为 canvas，消除整页平铺白色；
 *   2) .table-wrap 承担卡片角色，不再贴边铺开；
 *   3) 工作台「周期 + 统计 + 主操作」合并为一张卡片，统计用 1px 竖线分隔；
 *   4) 数据拉取的服务状态 / 参数 / 进度 / 日志各自成卡片。
 * ===================================================================== */
.content{background:var(--canvas)}
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 1px 2px rgba(29,33,41,.03)}

/* ---------- P02 工作台 ---------- */
.dash-top{display:flex;align-items:center;gap:var(--sp-3);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:var(--sp-2) var(--sp-3);
  margin-bottom:var(--sp-2);box-shadow:0 1px 2px rgba(29,33,41,.03)}
.dash-top-main{flex:1 1 auto;min-width:0}
.dash-top .period-line{margin:0 0 var(--sp-2);font-size:var(--fs-l2);color:var(--ink2)}
.dash-top .period-line b{font-weight:600;color:var(--ink)}
.dash-top .stat-row{margin:0;gap:var(--sp-1) var(--sp-3)}
.dash-top .stat-row .st{align-items:baseline}
.dash-top .stat-row .st b{font-size:var(--fs-l4);line-height:28px}
.dash-top .stat-row .st span{color:var(--ink2)}
.dash-top .stat-row .st+.st{border-left:0;padding-left:var(--sp-3);position:relative}
.dash-top .stat-row .st+.st::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:16px;background:var(--line)}
.dash-top .btn{flex:none}

.sec-title{margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-l3);line-height:24px}
.two-col{margin-top:var(--sp-3);gap:var(--sp-3)}
.two-col .sec-title{margin-top:0}
.two-col .table-wrap+.table-wrap{margin-top:0}
#pageContent>.table-wrap+.sec-title{margin-top:var(--sp-3)}

/* ---------- P03 数据拉取 ---------- */
.relay-strip,.relay-strip.on,.relay-strip.off{display:flex;align-items:center;flex-wrap:wrap;
  gap:0 var(--sp-2);background:var(--surface);border:1px solid var(--line);border-radius:8px;
  min-height:44px;padding:0 var(--sp-3);margin-bottom:var(--sp-2);
  box-shadow:0 1px 2px rgba(29,33,41,.03)}
.relay-strip b{font-weight:500;color:var(--ink);font-size:var(--fs-l2)}
.relay-strip .rs-ttl{color:var(--ink3)}
.relay-strip .rs-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px rgba(0,135,90,.12)}
.relay-strip.off .rs-dot{background:var(--danger);box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.relay-strip .rs-sep{width:1px;height:12px;background:var(--line);font-size:0;line-height:0;
  color:transparent;overflow:hidden;margin:0 var(--sp-2);flex:none}
.relay-strip .rs-txt{color:var(--ink2)}
.relay-strip .rs-spacer{flex:1}
.relay-strip .rs-tech{margin-left:auto}
.relay-strip .rs-tech summary{color:var(--primary);font-size:var(--fs-l2)}

.relay-params{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2);flex-wrap:nowrap;
  box-shadow:0 1px 2px rgba(29,33,41,.03)}
.relay-params .pp select{height:var(--tableRow);background:var(--surface)}
.exec-block{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:var(--sp-3);box-shadow:0 1px 2px rgba(29,33,41,.03)}
.exec-row .progress{background:var(--line)}
.log-plain{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  margin-bottom:var(--sp-2);max-height:420px;overflow:auto;
  box-shadow:0 1px 2px rgba(29,33,41,.03)}
.log-plain:not(:has(table)){padding:var(--sp-3);color:var(--ink3)}
.log-plain table{width:100%}
.log-plain .log-tbl th{background:var(--canvas)}

/* ---------- P03 细化：参数卡片换行、折叠项独占一行、日志卡片脚 ---------- */
.relay-params{flex-wrap:wrap;align-items:center}
.relay-params .relay-adv{flex:0 0 100%;width:100%;margin:var(--sp-1) 0 0;
  padding-top:var(--sp-1);border-top:1px solid var(--line)}
.relay-params .relay-adv[open]{padding-bottom:var(--sp-1)}
.relay-strip .rs-msg{color:var(--danger)}
.relay-strip .rs-ttl{color:var(--ink3)}
.log-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  margin-bottom:var(--sp-2);overflow:hidden;box-shadow:0 1px 2px rgba(29,33,41,.03)}
.log-card .log-plain{border:0;border-radius:0;box-shadow:none;margin:0}
.log-card-foot{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;
  padding:var(--sp-1) var(--sp-2);border-top:1px solid var(--line);background:#FCFCFD}
.log-card-foot .muted{margin-left:var(--sp-h)}

/* 阶段节点文字放大到图示层级（16/24） */
.imp-step .t b{font-size:var(--fs-l3);font-weight:500}
.imp-step .t .d{font-size:var(--fs-l2);line-height:20px;color:var(--ink3)}
.exec-block .imp-steps{margin-bottom:var(--sp-3)}

/* ---------- 配色校正：流程条属框架，用 surface 白底 + 发丝下边框 ---------- */
.workflow{background:var(--surface);border-bottom:1px solid #E5E6EB}
.topbar{border-bottom:1px solid #E5E6EB}

/* ---------- 告警条：白卡片 + 左侧色条（灰底上不再一块彩色铺满） ---------- */
.notice{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--primary);
  border-radius:8px;box-shadow:0 1px 2px rgba(29,33,41,.03);padding:var(--sp-2) var(--sp-3)}
.notice.warn{background:var(--surface);border-left-color:var(--warn);color:var(--ink2)}
.notice.warn b{color:#96540A}
.notice.danger{background:var(--surface);border-left-color:var(--danger);color:var(--ink2)}
.notice.danger b{color:var(--danger)}

/* 执行进度底部状态行 */
.exec-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-h) var(--sp-2);
  margin-top:var(--sp-2)}
.exec-status .imp-stage{margin:0}
.exec-status .hint{margin:0;color:var(--ink3)}

/* 阶段节点与进度行之间收一档，避免卡片内部空旷 */
.exec-block .imp-steps{margin-bottom:var(--sp-2)}
.exec-block .exec-row{margin-top:0}

/* ---------- 流程条「待更新」：行数对得上但内容过期（写入失败 / 未重拉） ----------
   与「待补数据」（红）区分开：数据条数够，只是不是最新的，用警示黄提示重拉。 */
.wf-node[data-state="stale"] .wf-ico{color:var(--warn)}
.wf-node[data-state="stale"] .wf-state{color:var(--warn)}
.exec-status .hint.warn{color:var(--warn);font-weight:500}