/* ==========================================================================
   游寺集团 · 人事行政平台 · 界面样式
   --------------------------------------------------------------------------
   设计口径（2026-09-24 改版）：
   「年轻一点、柔和一点，但不能轻浮」——使用者以 20 多岁女生为主，
   又要承载人事档案这种严肃数据。做法：
     ① 底色从冷灰改成暖白微粉，主色从企业蓝改成雾玫瑰（可换藕荷/蜜桃/薄荷）
     ② 圆角加大、阴影变软、去掉硬边框，抬头/卡片/按钮统一一种缓动
     ③ 侧栏由深藏青改为浅暖色 —— 一眼就"轻"下来，但仍靠字号/密度保持专业感
     ④ 所有颜色走 CSS 变量，深色模式只改变量、不覆盖组件，避免"改了这边坏那边"
   ========================================================================== */

/* ---------- 1. 设计令牌（浅色 · 玫瑰，默认档） ---------- */
:root {
  /* 底面 */
  --bg: #fbf7f9;
  --bg-wash: #fdf3f7;          /* 次级底：表头 / 底纹块 */
  --panel: #ffffff;
  --panel-2: #fdf9fb;
  --ctrl-bg: #ffffff;          /* 按钮 / 输入框底 */

  /* 线 */
  --line: #f2e7ee;
  --line-2: #e8d8e2;

  /* 字 */
  --text: #3c3139;
  --text-2: #5d4f59;
  --muted: #948894;

  /* 主色（雾玫瑰） */
  --brand: #c9557f;
  --brand-dark: #a83f66;
  --brand-soft: #fdeef4;
  --brand-line: #f7d4e2;

  /* 副色（藕荷紫，用于渐变收尾与次要强调） */
  --accent: #8b7cc9;

  /* 语义色 */
  --ok: #2f9e79;   --ok-soft: #e9f7f1;   --ok-line: #c3e9da;
  --warn: #c9862b; --warn-soft: #fdf4e6; --warn-line: #f0dcb8;
  --err: #d1546c;  --err-soft: #fdeef0;  --err-line: #f7cdd4;
  --info: #7b6fd0; --info-soft: #f2effc; --info-line: #ddd6f5;

  /* 侧栏（浅暖，不再是深藏青） */
  --side-bg: linear-gradient(180deg, #fff8fb 0%, #fdf2f8 58%, #fbeef5 100%);
  --side-line: #f5e3ec;
  --side-text: #6b5b67;
  --side-hover: #fdeaf2;

  /* 交互底纹 */
  --row-hover: #fdf6fa;
  --cell-edit: #fdeef4;

  /* 玻璃层（柔和渐变背景 + 照片背景用） */
  --glass: rgba(255, 255, 255, .74);
  --glass-2: rgba(255, 255, 255, .88);
  --scrim: rgba(78, 46, 62, .42);

  /* 形状 / 阴影 / 缓动 */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-lg: 20px;
  --sh-1: 0 1px 2px rgba(150, 88, 120, .05), 0 6px 18px rgba(150, 88, 120, .06);
  --sh-2: 0 2px 6px rgba(150, 88, 120, .08), 0 16px 38px rgba(150, 88, 120, .13);
  --sh-brand: 0 8px 20px rgba(201, 85, 127, .24);
  --ease: cubic-bezier(.4, .16, .2, 1);

  /* 图表 */
  --chart-in: #d1789c;
  --chart-out: #a99bc4;

  /* 兼容旧变量：只剩下面 3 个 —— 统计图 SVG 里引用了它们，原来没定义
     → 深色模式下网格线与刻度会变成默认黑，等于看不见。这里补齐。
     （`--color-background-secondary` 已随旧的 .answer-box 规则一起废弃，2026-09-24 清理） */
  --color-text-tertiary: var(--muted);
  --color-text-secondary: var(--text-2);
  --color-border-tertiary: var(--line);
}

/* ---------- 2. 配色档位（浅色）----------
   只换主色系，不动结构；按钮/选中态/图表跟着一起变 */
html[data-accent="rose"]  { --brand: #c9557f; --brand-dark: #a83f66; --brand-soft: #fdeef4; --brand-line: #f7d4e2; --sh-brand: 0 8px 20px rgba(201,85,127,.24); --row-hover: #fdf6fa; --cell-edit: #fdeef4; --chart-in: #d1789c; }
html[data-accent="lilac"] { --brand: #8f7cc9; --brand-dark: #7261ab; --brand-soft: #f3effc; --brand-line: #ded5f5; --sh-brand: 0 8px 20px rgba(143,124,201,.24); --row-hover: #f9f7fd; --cell-edit: #f3effc; --chart-in: #a596d6; }
html[data-accent="peach"] { --brand: #d3805c; --brand-dark: #b36440; --brand-soft: #fdf1ea; --brand-line: #f6dbca; --sh-brand: 0 8px 20px rgba(211,128,92,.24); --row-hover: #fef8f4; --cell-edit: #fdf1ea; --chart-in: #e0977a; }
html[data-accent="mint"]  { --brand: #3f9e8a; --brand-dark: #2f7f6e; --brand-soft: #ecf8f5; --brand-line: #cbeae2; --sh-brand: 0 8px 20px rgba(63,158,138,.22); --row-hover: #f5fbf9; --cell-edit: #ecf8f5; --chart-in: #57b3a0; }

/* ---------- 3. 深色主题：只覆盖令牌 ---------- */
html[data-theme="dark"] {
  --bg: #16121a;
  --bg-wash: #1e1924;
  --panel: #1f1a24;
  --panel-2: #241e2a;
  --ctrl-bg: #241e2a;

  --line: #302838;
  --line-2: #3f3547;

  --text: #f2ecf1;
  --text-2: #d3c8d3;
  --muted: #a396a8;

  --brand: #e57aa4;
  --brand-dark: #c9557f;
  --brand-soft: rgba(229, 122, 164, .15);
  --brand-line: rgba(229, 122, 164, .34);
  --accent: #a99bde;

  --ok: #5fc79e;   --ok-soft: rgba(95, 199, 158, .15);   --ok-line: rgba(95, 199, 158, .32);
  --warn: #e2ab5c; --warn-soft: rgba(226, 171, 92, .15); --warn-line: rgba(226, 171, 92, .32);
  --err: #ee8296;  --err-soft: rgba(238, 130, 150, .15); --err-line: rgba(238, 130, 150, .32);
  --info: #a99bde; --info-soft: rgba(169, 155, 222, .15); --info-line: rgba(169, 155, 222, .32);

  --side-bg: #1a151f;
  --side-line: #2b2433;
  --side-text: #c3b6c4;
  --side-hover: #241d2b;

  --row-hover: #251e2c;
  --cell-edit: rgba(229, 122, 164, .13);

  --glass: rgba(31, 26, 36, .8);
  --glass-2: rgba(31, 26, 36, .92);
  --scrim: rgba(8, 5, 10, .68);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .26);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .36), 0 18px 40px rgba(0, 0, 0, .4);
  --sh-brand: 0 8px 22px rgba(0, 0, 0, .42);

  --chart-in: #e08aae;
  --chart-out: #9c8fc4;
}
/* 深色 + 配色档位（属性选择器双条件，优先级高于上面两条） */
html[data-theme="dark"][data-accent="rose"]  { --brand: #e57aa4; --brand-dark: #c9557f; --brand-soft: rgba(229,122,164,.15); --brand-line: rgba(229,122,164,.34); --chart-in: #e08aae; }
html[data-theme="dark"][data-accent="lilac"] { --brand: #a99bde; --brand-dark: #8f7cc9; --brand-soft: rgba(169,155,222,.15); --brand-line: rgba(169,155,222,.34); --chart-in: #b3a6e2; }
html[data-theme="dark"][data-accent="peach"] { --brand: #e79a72; --brand-dark: #d3805c; --brand-soft: rgba(231,154,114,.15); --brand-line: rgba(231,154,114,.34); --chart-in: #e7a284; }
html[data-theme="dark"][data-accent="mint"]  { --brand: #5fc0a8; --brand-dark: #3f9e8a; --brand-soft: rgba(95,192,168,.15);  --brand-line: rgba(95,192,168,.34);  --chart-in: #6bc7b0; }

/* ---------- 4. 基础 ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--text);
  background-color: var(--bg);
  /* 默认底：极淡的粉/紫柔光，避免大字白底发空 */
  background-image:
    radial-gradient(1200px 620px at 10% -10%, rgba(201, 85, 127, .055), transparent 60%),
    radial-gradient(980px 560px at 100% 0%, rgba(139, 124, 201, .05), transparent 58%);
  background-attachment: fixed;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hidden { display: none !important; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); word-break: break-all; }

::selection { background: var(--brand-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 细滚动条（默认那条又宽又灰，很"老系统"） */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-line); background-clip: content-box; }

/* ---------- 5. 表单字段 ---------- */
.fld { display: block; margin-bottom: 14px; }
.fld > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-size: 14px; background: var(--ctrl-bg); color: var(--text); font-family: inherit;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--brand-line); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft);
}
.login-error { color: var(--err); font-size: 13px; min-height: 20px; margin: 10px 0 0; }

/* ---------- 6. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--line-2); background: var(--ctrl-bg); color: var(--text-2);
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
}
.btn:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: var(--sh-brand);
}
.btn.primary:hover { filter: brightness(1.07); color: #fff; }
.btn.tiny { padding: 5px 11px; font-size: 12px; border-radius: 999px; }
.btn.danger:hover { border-color: var(--err-line); color: var(--err); background: var(--err-soft); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

/* ---------- 7. 布局 ---------- */
.app { display: flex; min-height: 100vh; }

/* 侧栏：浅暖底 + 细分割线（原来是深藏青，视觉压得很重） */
.side {
  width: 224px; background: var(--side-bg); color: var(--side-text);
  border-right: 1px solid var(--side-line);
  display: flex; flex-direction: column; flex-shrink: 0;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid var(--side-line); }
.side-logo {
  width: 32px; height: 32px; border-radius: 11px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  box-shadow: var(--sh-brand);
}
.side-title { font-size: 13px; font-weight: 650; letter-spacing: .02em; color: var(--text); }

.nav { padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 0; background: transparent; color: var(--side-text);
  font-size: 13.5px; font-weight: 500; font-family: inherit; text-align: left;
  border-radius: 11px; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.nav-item:hover { background: var(--side-hover); color: var(--brand); }
.nav-item.on {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-weight: 600; box-shadow: var(--sh-brand);
}
/* 图标做成小圆角牌子，比裸字符精致，也让"选中"更有分量 */
.ni-ico {
  width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; background: var(--brand-soft); color: var(--brand);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav-item:hover .ni-ico { background: var(--panel); }
.nav-item.on .ni-ico { background: rgba(255, 255, 255, .24); color: #fff; }

.side-foot {
  margin-top: auto; padding: 13px 14px 16px; border-top: 1px solid var(--side-line);
  display: flex; align-items: center; gap: 10px;
}
.who-av {
  width: 36px; height: 36px; border-radius: 13px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  box-shadow: var(--sh-brand);
}
.who { flex: 1; min-width: 0; }
.who-hello { display: block; font-size: 11px; font-weight: 600; color: var(--brand); margin-bottom: 1px; }
.who b { display: block; font-size: 13px; color: var(--text); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 22px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(150, 88, 120, .04);
  position: sticky; top: 0; z-index: 20;
}
.topbar h2 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: .01em; display: flex; align-items: center; gap: 8px; }
.topbar h2::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.role-hint { font-size: 12px; color: var(--warn); }
.save-hint { font-size: 12px; color: var(--ok); opacity: 0; transition: opacity .2s var(--ease); }
.save-hint.on { opacity: 1; }
.today-chip {
  font-size: 12px; color: var(--muted); padding: 4px 11px; border-radius: 999px;
  background: var(--bg-wash); border: 1px solid var(--line);
}
.view { max-width: 1500px; width: 100%; padding: 16px 22px 28px; }

/* ---------- 8. 提示条 ---------- */
.banner { margin: 14px 22px 0; padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid; }
.banner.info { background: var(--info-soft); border-color: var(--info-line); color: var(--info); }
.banner.ok   { background: var(--ok-soft);   border-color: var(--ok-line);   color: var(--ok); }
.banner.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.banner.err  { background: var(--err-soft);  border-color: var(--err-line);  color: var(--err); }

/* ---------- 9. 工具条 ---------- */
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.search {
  flex: 1; min-width: 200px; padding: 9px 14px 9px 34px;
  border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px;
  background-color: var(--ctrl-bg); color: var(--text); font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c99aae' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5l-4.4-4.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px center; background-size: 14px 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search::placeholder { color: var(--muted); }
.search:hover { border-color: var(--brand-line); }
.search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft); }

select.mini, .form-row select {
  padding: 8px 30px 8px 11px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-size: 13px; background-color: var(--ctrl-bg); color: var(--text); font-family: inherit;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23c99aae' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1.5 2.2L6 6.2l4.5-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 7px;
  cursor: pointer; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
select.mini:hover, .form-row select:hover { border-color: var(--brand-line); }
select.mini:focus, .form-row select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft); }

.count { font-size: 12px; color: var(--muted); }
.pager { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.hint { font-size: 12px; color: var(--muted); margin: 6px 0 12px; }
.hint b { color: var(--text-2); font-weight: 650; }
.sub { font-size: 14px; font-weight: 650; margin: 24px 0 10px; color: var(--text); }

/* ---------- 10. 表格 ---------- */
.grid-wrap {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: auto; max-height: calc(100vh - 300px); box-shadow: var(--sh-1);
}
.grid { border-collapse: separate; border-spacing: 0; font-size: 13px; width: 100%; }
.grid th, .grid td {
  padding: 9px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 280px;
}
.grid th:last-child, .grid td:last-child { border-right: 0; }
.grid thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg-wash); color: var(--text-2);
  font-weight: 650; font-size: 12px; letter-spacing: .02em;
  border-bottom: 1px solid var(--brand-line);
}
.grid tbody tr { transition: background .14s var(--ease); }
.grid tbody tr:hover td { background: var(--row-hover); }
.grid td.editable { cursor: text; }
.grid td.editable:hover { background: var(--cell-edit); box-shadow: inset 0 0 0 1.5px var(--brand-line); }
.grid tr.draft td { background: var(--warn-soft); }
.phone { font-family: ui-monospace, Consolas, monospace; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.rc-phone { font-size: 13px; color: var(--text-2); font-family: ui-monospace, Consolas, monospace; margin: 3px 0 0; }
.same-tip {
  background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn);
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13px; margin-bottom: 12px;
}
.same-tip b { font-weight: 650; }
.cell-input {
  width: 100%; min-width: 90px; padding: 4px 7px; border: 1px solid var(--brand);
  border-radius: var(--radius-xs); font-size: 13px; background: var(--ctrl-bg); color: var(--text);
  font-family: inherit; box-shadow: 0 0 0 3px var(--brand-soft);
}
.op-col { position: sticky; right: 0; background: var(--panel); z-index: 2; white-space: nowrap; }
.grid thead .op-col { background: var(--bg-wash); z-index: 4; }

/* 空状态：给个柔和的小图标，而不是一行干巴巴的字 */
.empty { padding: 54px 24px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.9; }
.empty::before {
  content: ''; display: block; width: 64px; height: 64px; margin: 0 auto 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Crect x='13' y='10' width='38' height='44' rx='11' stroke='%23e9b6cd' stroke-width='3'/%3E%3Cpath d='M23 25h18M23 34h18M23 43h11' stroke='%23e9b6cd' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 64px 64px; background-repeat: no-repeat; opacity: .9;
}
.audit td { white-space: normal; max-width: 420px; }

/* ---------- 11. 标签 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  border: 1px solid; line-height: 1.7; vertical-align: middle;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; flex: 0 0 auto; }
.badge.ok   { color: var(--ok);   background: var(--ok-soft);   border-color: var(--ok-line); }
.badge.off  { color: var(--muted); background: var(--bg-wash);  border-color: var(--line-2); }
.badge.warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.badge.bad  { color: var(--err);  background: var(--err-soft);  border-color: var(--err-line); }
.badge.info { color: var(--info); background: var(--info-soft); border-color: var(--info-line); }

/* ---------- 12. 查人 ---------- */
.lookup-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin-bottom: 16px; box-shadow: var(--sh-1);
}
.lookup-row { display: flex; gap: 10px; }
.lookup-input {
  flex: 1; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-size: 16px; background: var(--ctrl-bg); color: var(--text); font-family: inherit;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.lookup-input:hover { border-color: var(--brand-line); }
.lookup-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft); }

.result-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--sh-1);
  animation: ysRise .26s var(--ease);
}
.result-card.none h3 { color: var(--warn); margin: 0 0 6px; font-size: 16px; }
.rc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.rc-head h3 { margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-head p { margin: 2px 0 0; font-size: 12px; }
.rc-avatar {
  width: 52px; height: 52px; border-radius: 17px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; letter-spacing: .02em; box-shadow: var(--sh-brand);
}
.rc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.stat span { display: block; font-size: 12px; color: var(--muted); }
.stat b { font-size: 16px; font-weight: 650; color: var(--text); }
.stat.wide { grid-column: span 2; }

/* 履历时间线：竖线用渐变，节点做成描边圆点 */
.timeline {
  margin: 6px 0 14px 3px; padding-left: 20px; display: flex; flex-direction: column; gap: 11px;
  border-left: 0;
  background-image: linear-gradient(180deg, var(--brand-line), var(--line));
  background-repeat: no-repeat; background-size: 2px 100%; background-position: 4px 0;
}
.tl-item { position: relative; font-size: 13px; }
.tl-item::before {
  content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--panel); border: 2.5px solid var(--line-2);
  box-shadow: 0 0 0 3px var(--panel);
}
.tl-item.join::before  { border-color: var(--ok); }
.tl-item.leave::before { border-color: var(--err); }
.tl-item.iv::before    { border-color: var(--brand); }
.tl-item b { margin-right: 8px; font-variant-numeric: tabular-nums; color: var(--text); }
.tl-item i { display: block; font-style: normal; font-size: 12px; }

/* ---------- 13. 弹窗 ---------- */
.modal {
  position: fixed; inset: 0; background: var(--scrim);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 60;
}
.modal-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; width: 100%; max-width: 620px; max-height: 88vh; overflow: auto;
  box-shadow: var(--sh-2);
  animation: ysRise .24s var(--ease);
}
.modal-card h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; }
.paste-area {
  width: 100%; min-height: 170px; margin-top: 10px; padding: 11px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; resize: vertical;
  background: var(--ctrl-bg); color: var(--text);
}
.paste-area:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft); }
.modal-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.rec-fields { margin-top: 10px; }
.form-row {
  display: flex; gap: 8px; flex-wrap: wrap; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--sh-1);
}
.form-row input {
  padding: 8px 11px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-size: 13px; min-width: 130px; flex: 1; background: var(--ctrl-bg); color: var(--text); font-family: inherit;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form-row input:hover { border-color: var(--brand-line); }
.form-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft); }

@keyframes ysRise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- 14. 统计概览 ---------- */
.st-bar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; box-shadow: var(--sh-1); }
.st-bar .lbl { font-size: 13px; color: var(--muted); }
.st-bar input[type="month"] {
  padding: 7px 9px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-size: 13px; background-color: var(--ctrl-bg); color: var(--text); font-family: inherit;
}
.st-bar input[type="month"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-soft); }
.st-bar .rng.on {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: var(--sh-brand);
}

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.kpi::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent)); opacity: .85;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.kpi span { display: block; font-size: 12px; color: var(--muted); }
.kpi b { display: block; font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi i { font-style: normal; font-size: 11px; display: block; margin-top: 2px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--sh-1); }
.panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h3 { margin: 0; font-size: 14.5px; font-weight: 650; }
.panel-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: start; }
.chart-scroll { overflow-x: auto; padding-bottom: 4px; }
.bar-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 12px; }
.bar-label { width: 118px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.bar-track { flex: 1; height: 14px; background: var(--bg-wash); border-radius: 99px; overflow: hidden; min-width: 60px; }
.bar-track i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width .5s var(--ease);
}
.bar-num { width: 34px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text); }

/* ---------- 15. 个人设置：档位选择 ---------- */
.seg { display: flex; gap: 7px; flex-wrap: wrap; }
.seg-btn.on {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: var(--sh-brand);
}
.seg-btn .sw {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
}
.seg-btn.on .sw { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
/* 配色小圆点 */
.seg-btn[data-accent="rose"] .sw  { background: linear-gradient(135deg, #e57aa4, #c9557f); }
.seg-btn[data-accent="lilac"] .sw { background: linear-gradient(135deg, #a99bde, #8f7cc9); }
.seg-btn[data-accent="peach"] .sw { background: linear-gradient(135deg, #eba987, #d3805c); }
.seg-btn[data-accent="mint"] .sw  { background: linear-gradient(135deg, #6bc7b0, #3f9e8a); }
/* 背景小色块 */
.seg-btn[data-bg="none"] .sw   { background: linear-gradient(135deg, #fbf7f9, #ece4ea); }
.seg-btn[data-bg="photo1"] .sw { background: linear-gradient(135deg, #7fb2ff, #10141b); }
.seg-btn[data-bg="photo2"] .sw { background: linear-gradient(135deg, #b39ddb, #10141b); }
.seg-btn[data-bg="photo3"] .sw { background: linear-gradient(135deg, #ffd9a0, #10141b); }
.seg-btn[data-bg="sakura"] .sw { background: linear-gradient(135deg, #ffc2d6, #dcc9f7); }
.seg-btn[data-bg="cream"] .sw  { background: linear-gradient(135deg, #ffe6c4, #f7d9c4); }
.seg-btn[data-bg="mint"] .sw   { background: linear-gradient(135deg, #c4ecdf, #cfe4f7); }

/* ---------- 16. 背景：照片（配深色玻璃）---------- */
body[data-bg="photo1"], body[data-bg="photo2"], body[data-bg="photo3"] {
  background-size: cover; background-position: center; background-attachment: fixed;
}
body[data-bg="photo1"] { background-image: url(bg/photo1.jpg); }
body[data-bg="photo2"] { background-image: url(bg/photo2.jpg); }
body[data-bg="photo3"] { background-image: url(bg/photo3.jpg); }
body[data-bg="photo1"] .panel, body[data-bg="photo2"] .panel, body[data-bg="photo3"] .panel,
body[data-bg="photo1"] .grid-wrap, body[data-bg="photo2"] .grid-wrap, body[data-bg="photo3"] .grid-wrap,
body[data-bg="photo1"] .kpi, body[data-bg="photo2"] .kpi, body[data-bg="photo3"] .kpi,
body[data-bg="photo1"] .topbar, body[data-bg="photo2"] .topbar, body[data-bg="photo3"] .topbar,
body[data-bg="photo1"] .lookup-box, body[data-bg="photo2"] .lookup-box, body[data-bg="photo3"] .lookup-box,
body[data-bg="photo1"] .result-card, body[data-bg="photo2"] .result-card, body[data-bg="photo3"] .result-card,
body[data-bg="photo1"] .st-bar, body[data-bg="photo2"] .st-bar, body[data-bg="photo3"] .st-bar,
body[data-bg="photo1"] .form-row, body[data-bg="photo2"] .form-row, body[data-bg="photo3"] .form-row {
  background: rgba(23, 28, 37, .82); backdrop-filter: blur(10px);
}
body[data-bg="photo1"] .grid thead th, body[data-bg="photo2"] .grid thead th, body[data-bg="photo3"] .grid thead th { background: rgba(27, 33, 43, .92); }
body[data-bg="photo1"] .grid td, body[data-bg="photo2"] .grid td, body[data-bg="photo3"] .grid td { border-color: rgba(255, 255, 255, .08); }
body[data-bg="photo1"] .grid th, body[data-bg="photo2"] .grid th, body[data-bg="photo3"] .grid th { border-color: rgba(255, 255, 255, .08); }

/* ---------- 17. 背景：柔和渐变（浅色玻璃，新增三档）---------- */
body[data-bg="sakura"] {
  background-color: #fdf3f7;
  background-image:
    radial-gradient(900px 620px at 10% -4%, rgba(255, 187, 212, .62), transparent 62%),
    radial-gradient(820px 560px at 94% 8%, rgba(214, 196, 247, .5), transparent 60%),
    radial-gradient(980px 720px at 46% 108%, rgba(255, 220, 228, .68), transparent 64%),
    linear-gradient(180deg, #fff9fc 0%, #fdeef5 100%);
}
body[data-bg="cream"] {
  background-color: #fdf8f0;
  background-image:
    radial-gradient(880px 600px at 8% -4%, rgba(255, 219, 176, .6), transparent 62%),
    radial-gradient(800px 540px at 96% 10%, rgba(255, 205, 205, .45), transparent 60%),
    radial-gradient(960px 700px at 52% 106%, rgba(255, 236, 205, .7), transparent 64%),
    linear-gradient(180deg, #fffcf6 0%, #fdf3e7 100%);
}
body[data-bg="mint"] {
  background-color: #f2fbf8;
  background-image:
    radial-gradient(880px 600px at 8% -4%, rgba(178, 235, 220, .62), transparent 62%),
    radial-gradient(820px 540px at 96% 10%, rgba(196, 222, 247, .5), transparent 60%),
    radial-gradient(960px 700px at 52% 106%, rgba(206, 240, 232, .7), transparent 64%),
    linear-gradient(180deg, #f8fefc 0%, #ecf8f4 100%);
}
/* 搭配深色主题时的柔和渐变（压暗、降饱和，避免亮粉底 + 亮字） */
html[data-theme="dark"] body[data-bg="sakura"] {
  background-color: #1a1218;
  background-image:
    radial-gradient(900px 620px at 10% -4%, rgba(201, 85, 127, .26), transparent 62%),
    radial-gradient(820px 560px at 94% 8%, rgba(139, 124, 201, .22), transparent 60%),
    linear-gradient(180deg, #1d1520 0%, #150f19 100%);
}
html[data-theme="dark"] body[data-bg="cream"] {
  background-color: #1b1611;
  background-image:
    radial-gradient(880px 600px at 8% -4%, rgba(201, 134, 43, .22), transparent 62%),
    radial-gradient(800px 540px at 96% 10%, rgba(190, 120, 90, .18), transparent 60%),
    linear-gradient(180deg, #1e1813 0%, #15110d 100%);
}
html[data-theme="dark"] body[data-bg="mint"] {
  background-color: #111a18;
  background-image:
    radial-gradient(880px 600px at 8% -4%, rgba(63, 158, 138, .24), transparent 62%),
    radial-gradient(820px 540px at 96% 10%, rgba(80, 130, 190, .2), transparent 60%),
    linear-gradient(180deg, #13201d 0%, #0d1514 100%);
}
/* 柔和渐变的玻璃层（--glass 随主题自动切换） */
body[data-bg="sakura"] .panel, body[data-bg="cream"] .panel, body[data-bg="mint"] .panel,
body[data-bg="sakura"] .grid-wrap, body[data-bg="cream"] .grid-wrap, body[data-bg="mint"] .grid-wrap,
body[data-bg="sakura"] .kpi, body[data-bg="cream"] .kpi, body[data-bg="mint"] .kpi,
body[data-bg="sakura"] .topbar, body[data-bg="cream"] .topbar, body[data-bg="mint"] .topbar,
body[data-bg="sakura"] .lookup-box, body[data-bg="cream"] .lookup-box, body[data-bg="mint"] .lookup-box,
body[data-bg="sakura"] .result-card, body[data-bg="cream"] .result-card, body[data-bg="mint"] .result-card,
body[data-bg="sakura"] .st-bar, body[data-bg="cream"] .st-bar, body[data-bg="mint"] .st-bar,
body[data-bg="sakura"] .form-row, body[data-bg="cream"] .form-row, body[data-bg="mint"] .form-row {
  background: var(--glass); backdrop-filter: blur(14px) saturate(140%);
}
body[data-bg="sakura"] .grid thead th, body[data-bg="cream"] .grid thead th, body[data-bg="mint"] .grid thead th,
body[data-bg="sakura"] .grid thead .op-col, body[data-bg="cream"] .grid thead .op-col, body[data-bg="mint"] .grid thead .op-col {
  background: var(--glass-2);
}
body[data-bg="sakura"] .grid td.op-col, body[data-bg="cream"] .grid td.op-col, body[data-bg="mint"] .grid td.op-col { background: var(--glass); }
body[data-bg="sakura"] .side, body[data-bg="cream"] .side, body[data-bg="mint"] .side {
  background: var(--glass); backdrop-filter: blur(14px) saturate(140%);
}
body[data-bg="sakura"] .grid td, body[data-bg="cream"] .grid td, body[data-bg="mint"] .grid td {
  border-color: var(--line);
}

/* ---------- 18. 模块 / 答题框 ---------- */
.nav-group {
  padding: 13px 12px 5px; font-size: 11px; letter-spacing: .12em;
  color: var(--muted); font-weight: 600;
}
.answer-box {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 13px; line-height: 1.8; white-space: pre-wrap; margin: 4px 0 10px;
  color: var(--text-2);
}

/* ---------- 19. 手机 ---------- */
.only-mobile { display: none; }
@media (max-width: 820px) {
  .only-mobile { display: inline-flex; }
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 80;
    transform: translateX(-100%); transition: transform .24s var(--ease);
    box-shadow: var(--sh-2);
  }
  .side.open { transform: translateX(0); }
  .banner { margin: 10px 14px 0; }
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar .btn.tiny { padding: 5px 10px; font-size: 12px; }
  .topbar .save-hint, .topbar .today-chip { display: none; }
  .topbar h2 { font-size: 15px; }
  .view { padding: 12px 14px 24px; }
  .grid-wrap { max-height: none; }
  .toolbar .btn { flex: 1 1 auto; }
  .search { flex: 1 1 100%; }
  .lookup-row { flex-direction: column; }
  .rc-stats { grid-template-columns: repeat(2, 1fr); }
  .stat.wide { grid-column: span 2; }
  .grid th, .grid td { padding: 9px 9px; font-size: 12px; max-width: 200px; }
  .modal-card { padding: 18px; border-radius: var(--radius); }
  .form-row input, .form-row select { min-width: 100%; }
}
@media (max-width: 820px) { .panel-grid { grid-template-columns: 1fr; } .bar-label { width: 88px; } }

/* ==========================================================================
   21. 离职薪资核算模块（.pm- 前缀，只在薪酬板块内生效，不影响其它板块）
   ========================================================================== */

/* 工具条 */
.pm-toolbar { flex-wrap: wrap; gap: 8px; align-items: center; }
.pm-sel, .pm-month-input {
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--ctrl-bg); color: var(--text); font-size: 13px; font-family: inherit;
}
.pm-month-input { width: 140px; }

/* ---------- 基数卡：左（大数字）/ 中（明细）/ 右（可调） ---------- */
.pm-base {
  display: grid; grid-template-columns: 200px 1fr 300px; gap: 18px; align-items: start;
}
.pm-base-left { text-align: center; padding: 6px 0; }
.pm-base-big {
  font-size: 52px; font-weight: 700; line-height: 1; color: var(--brand);
  letter-spacing: -1px; font-variant-numeric: tabular-nums;
}
.pm-base-big i { font-size: 16px; font-style: normal; font-weight: 500; margin-left: 4px; color: var(--muted); }
.pm-base-label { font-size: 12px; color: var(--muted); margin-top: 6px; }
.pm-base-calc { font-size: 12px; margin-top: 8px; line-height: 1.6; }
.pm-base-calc b { color: var(--text); }

.pm-base-mid { border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0 16px; }
.pm-line { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 13px; flex-wrap: wrap; }
.pm-line span { color: var(--muted); min-width: 84px; }
.pm-line b { font-variant-numeric: tabular-nums; }
.pm-line i { font-style: normal; font-size: 12px; }

.pm-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.pm-base-input { display: flex; align-items: center; gap: 6px; }
.pm-base-input input {
  width: 88px; padding: 8px 12px; font-size: 20px; font-weight: 700;
  border-radius: 12px; border: 1.5px solid var(--brand-line); background: var(--ctrl-bg);
  color: var(--brand); text-align: center; font-family: inherit; font-variant-numeric: tabular-nums;
}
.pm-base-input span { font-size: 13px; color: var(--muted); }
.pm-base-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pm-base-diff { font-size: 12px; margin-top: 8px; padding: 5px 9px; border-radius: 8px; line-height: 1.5; }
.pm-base-diff.ok { background: var(--ok-soft); color: var(--ok); }
.pm-base-diff.warn { background: var(--warn-soft); color: var(--warn); }
.pm-lock { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }

/* 待修正 KPI 标红 */
.kpi.pm-kpi-bad b { color: var(--bad, #c0392b); }

/* ---------- 核对提醒 ---------- */
.pm-check.ok { display: flex; align-items: center; gap: 10px; }
.pm-check.ok b { color: var(--ok); }
.pm-check-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pm-check-head .muted { font-size: 12px; }
.pm-check-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.pm-check-list li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px;
}
.pm-check-list li:last-child { border-bottom: none; }
.pm-check-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; flex: 0 0 auto; }
.pm-check-tag.bad { background: var(--bad-soft, #fdecea); color: var(--bad, #c0392b); }
.pm-check-tag.warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- 明细表 ---------- */
.pm-table-panel { padding-bottom: 10px; }
.pm-table-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pm-table-head .muted { font-size: 12px; }
.pm-grid-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
.pm-grid { min-width: 1680px; font-size: 13px; }
.pm-grid th, .pm-grid td { white-space: nowrap; }
.pm-grid td.pm-num { text-align: right; font-variant-numeric: tabular-nums; }
/* 身份证号 / 银行卡号：完整显示、等宽字体（数字对齐了好核对，也方便肉眼查有没有抄错） */
.pm-grid td.pm-code { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12.5px; letter-spacing: .2px; }
.pm-grid td.pm-idcard { color: var(--text, #1f2937); }
/* 系统内部列（不发给劳务的那些）表头换个底色，一眼看出"左边是给劳务的、右边是自己看的" */
.pm-grid th.pm-col-sys { background: var(--bg-wash); color: var(--muted); font-weight: 500; }

/* ---------- 框选 / 多选（2026-10-26 加：Excel 式框选 + 行勾选） ---------- */
.pm-pick-col { width: 58px; text-align: left; padding-left: 8px !important; }
.pm-pick-col .pm-pick-num { margin-left: 5px; color: var(--muted); font-size: 12px; }
.pm-grid td.pm-picked { background: #eef4ff !important; }
.pm-pick { cursor: pointer; vertical-align: -1px; }
/* 框选高亮：跟 Excel 一样，选中的格子淡蓝底 */
.pm-grid td.pm-sel {
  background: #dbeafe !important;
  box-shadow: inset 0 0 0 1px #93c5fd;
}
/* 框选时不要选中网页文字（否则拖出一片蓝色文字，很难看） */
.pm-grid tbody { user-select: none; -webkit-user-select: none; }
/* 但输入框里要能正常选字 */
.pm-grid tbody input, .pm-grid tbody select, .pm-grid tbody textarea {
  user-select: text; -webkit-user-select: text;
}
.pm-seq { color: var(--muted); font-size: 12px; text-align: center; }
.pm-same { color: var(--ok); font-size: 12px; }
.pm-diff { color: var(--bad, #c0392b); font-weight: 600; }
.pm-row-bad td { background: var(--bad-soft, #fdecea) !important; }
.pm-row-warn td { background: var(--warn-soft) !important; }
.pm-sum td { font-weight: 700; background: var(--bg-wash); }
.pm-ratio {
  font-style: normal; font-size: 11px; padding: 1px 5px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn); margin-left: 3px; vertical-align: 1px;
}
/* 「人事填的」这一列支持公式：
   ƒ 标记表示这格是公式算出来的（鼠标停上去能看原公式）
   公式写错时整格变红提示，不静默算成 0 */
.pm-fx {
  font-style: normal; font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 4px;
  background: #eef4ff; color: #3b6fd4; margin-right: 3px; vertical-align: 1px;
  font-family: Georgia, "Times New Roman", serif;
}
.pm-fx-err { background: var(--bad-soft, #fdecea); color: var(--bad, #c0392b); font-size: 12px; }
.pm-input-fx { font-family: ui-monospace, Consolas, Monaco, monospace; }
.pm-type { font-size: 12px; }
.pm-type-quit { color: var(--bad, #c0392b); }

/* 行内编辑输入框 */
.pm-input {
  width: 100%; min-width: 60px; padding: 3px 6px; font-size: 13px; font-family: inherit;
  border: 1.5px solid var(--brand-line); border-radius: 6px; background: var(--ctrl-bg); color: var(--text);
}
.pm-input:focus { outline: none; border-color: var(--brand); }

/* ---------- 粘贴导入 ---------- */
.pm-textarea {
  width: 100%; min-height: 130px; padding: 10px 12px; font-size: 12px; line-height: 1.6;
  font-family: ui-monospace, Consolas, monospace; border-radius: 12px;
  border: 1.5px solid var(--line-2); background: var(--ctrl-bg); color: var(--text); resize: vertical;
}
.pm-textarea:focus { outline: none; border-color: var(--brand); }
.pm-import-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.pm-import-foot label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* 账号管理：板块权限开关 */
.nu-perm { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.perm-btns { display: inline-flex; gap: 4px; margin-left: 6px; flex-wrap: wrap; }
.perm-btns .btn.tiny { font-size: 11px; padding: 3px 8px; }


/* ---------- 填报入口（二维码 + 待核对）---------- */
.pm-entry { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.pm-qr { width: 220px; height: 220px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pm-qr img { width: 100%; height: 100%; object-fit: contain; }
.pm-qr-cap { font-size: 12px; text-align: center; margin-top: 8px; }
/* 通用码标签 + 大字月份（2026-11-02 加：彬哥分不清码是几月的，发错月份）
   目的：扫之前先看清"这个码现在填进哪个月" */
.pm-qr-tag { text-align: center; font-size: 13px; font-weight: 700; color: #2b6cb0;
  background: #ebf4ff; border: 1px solid #bee3f8; border-radius: 8px; padding: 5px 8px; margin-bottom: 8px; }
.pm-qr-tag-sub { font-weight: 400; font-size: 11px; color: #4a7ab5; margin-top: 2px; }
.pm-qr-month { text-align: center; font-size: 19px; font-weight: 700; color: var(--text); margin-top: 10px; letter-spacing: .5px; }
.pm-qr-cap b { color: var(--text); }
/* 点二维码放大（2026-11-03 加：手机对着电脑屏幕扫，小图经常扫不出来）
   放大后铺满整个屏幕、白底、居中，手机一扫就好；再点一下还原 */
.pm-qr { cursor: zoom-in; transition: box-shadow .15s; }
.pm-qr:hover { box-shadow: 0 0 0 2px #bee3f8; }
.pm-qr.pm-qr-zoom {
  position: fixed; inset: 0; z-index: 99999; cursor: zoom-out;
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  border: none; border-radius: 0; background: #fff;
  padding: min(6vw, 60px); box-sizing: border-box;
}
.pm-qr.pm-qr-zoom svg, .pm-qr.pm-qr-zoom img {
  width: 100% !important; height: 100% !important; object-fit: contain;
}
.pm-qr-hint { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 6px; line-height: 1.5; }
.pm-qr-zoomtip {
  position: fixed; bottom: 18px; left: 0; right: 0; z-index: 100000;
  text-align: center; font-size: 13px; color: #666; pointer-events: none;
}
/* 当月账套没建时的醒目提醒 */
.pm-tip-warn { background: #fffaf0; border: 1px solid #f6c56b; border-left: 4px solid #e29b23;
  color: #7b4a06; font-size: 13px; line-height: 1.7; padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; }
.pm-tip-warn b { color: #8a4b00; }
/* 专用码折叠区 */
.pm-more { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.pm-more summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); user-select: none; }
.pm-more summary:hover { color: var(--text); }
.pm-linkrow { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.pm-linkrow .pm-input { flex: 1; font-size: 12px; font-family: ui-monospace, Consolas, monospace; }
.pm-toggle-row { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.pm-note-edit { display: flex; gap: 6px; align-items: center; }
.pm-note-edit .pm-input { flex: 1; }
@media (max-width: 860px) {
  .pm-entry { grid-template-columns: 1fr; }
  .pm-qr { width: 100%; max-width: 260px; height: 260px; margin: 0 auto; }
  .pm-linkrow { flex-wrap: wrap; }
  .pm-linkrow .pm-input { flex: 1 1 100%; }
}

/* 个人基数（节假日后入职等特殊情况）：填了的话单元格高亮，一眼能看出这行不是按统一基数算的 */
.pm-base-personal { background: #fff8e8 !important; }
.pm-base-personal b { color: #a8690d; }

/* ---------- 手机 ---------- */
@media (max-width: 860px) {
  .pm-base { grid-template-columns: 1fr; gap: 12px; }
  .pm-base-mid { border-left: none; border-right: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
  .pm-base-big { font-size: 42px; }
  .pm-base-actions .btn { flex: 1 1 auto; }
  .pm-toolbar .btn, .pm-toolbar .pm-sel, .pm-toolbar .pm-month-input { flex: 1 1 auto; }
}

/* ---------- 20. 尊重"减少动效" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}