/* yeren-pay · 视觉：向 Apple 系统设置 / Numbers 看齐
 * 原则：去掉网格噪音、用留白和斑马纹分区、关键数字给重量、编辑格不刺眼
 * 打印样式在文件末尾，会把这些"屏幕感"全部退回 Excel 原貌
 */
:root {
  /* Apple 中性色阶（浅色） */
  --bg: #f5f5f7;
  --card: #ffffff;
  --line: rgba(0, 0, 0, .07);
  --line-2: rgba(0, 0, 0, .12);
  --txt: #1d1d1f;
  --txt-2: #3a3a3c;
  --sub: #6e6e73;
  --faint: #a1a1a6;
  --pri: #0071e3;
  --pri-dark: #0058b9;
  --pri-soft: rgba(0, 113, 227, .08);
  --ok: #1a7f37;
  --warn: #b25000;
  --bad: #d70015;
  /* 斑马纹两端：要一眼能跟住行，但不刺眼。
   * 3% 的明度差在这个字号下等于没有；提到 8% 左右才够用。 */
  --z1: #ffffff;
  --z2: #eaeef4;
  --row-hover: #dfeafb;
  --net-tint: #f3fbf5;
  --grid-h: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
        "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#app { max-width: 1720px; margin: 0 auto; padding: 22px 24px 40px; }

/* ---------- 登录 ---------- */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 92vh; }
.login-card {
  background: var(--card); border-radius: 20px; padding: 44px 44px 36px; width: 372px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 18px 50px rgba(0,0,0,.10);
}
.login-card h1 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 6px; font-weight: 650; }
.login-card .sub { color: var(--sub); font-size: 12.5px; margin-bottom: 26px; }
.login-card input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 11px;
  margin-bottom: 12px; font-size: 15px; background: #fbfbfd; transition: .18s;
}
.login-card input:focus { outline: none; background: #fff; border-color: var(--pri); box-shadow: 0 0 0 3.5px var(--pri-soft); }
.login-card button { width: 100%; padding: 12px; border-radius: 11px; font-size: 15px; }

/* 钉钉免登：进来先认人，认不出才让人输口令 */
.login-card.splash { text-align: center; padding: 54px 44px 46px; }
.login-card.splash .skip {
  display: inline-block; width: auto; margin: 18px auto 0; padding: 6px 10px;
  font-size: 12.5px; color: var(--sub); background: transparent;
  border: 0; box-shadow: none; text-decoration: underline; text-underline-offset: 3px;
}
.login-card.splash .skip:hover { background: transparent; color: var(--txt); }
.spin {
  width: 26px; height: 26px; margin: 26px auto 0; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--pri);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ding-box {
  margin-bottom: 18px; padding: 12px 14px; border-radius: 11px;
  background: #f5f8ff; border: 1px solid rgba(0, 113, 227, .14);
}
.ding-box .ding-txt { font-size: 12.5px; color: #0a5cc0; line-height: 1.55; }
.ding-box .ding-retry {
  margin-top: 10px; width: 100%; padding: 8px; font-size: 13px;
  background: #fff; color: var(--pri); border: 1px solid rgba(0, 113, 227, .3);
}
.sim-row {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sim-row span { font-size: 11.5px; color: var(--faint); }
.sim-row button { width: auto; flex: 1 1 0; padding: 7px 10px; font-size: 12.5px; }

/* 授权名单 */
.acc-list { margin-top: 4px; }
.acc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
}
.acc-row:last-child { border-bottom: none; }
.acc-row.off { opacity: .5; }
.acc-main { display: flex; align-items: center; gap: 10px; min-width: 150px; cursor: pointer; }
.acc-main input { width: 17px; height: 17px; accent-color: var(--pri); }
.acc-name { font-size: 14px; font-weight: 550; color: var(--txt); }
.acc-name i { font-style: normal; font-size: 11.5px; color: var(--sub); margin-left: 7px; font-weight: 400; }
.acc-bind { flex: 1 1 auto; font-size: 11.5px; color: var(--faint); }
.acc-bind .bind-ok { color: #0f6b32; font-weight: 600; }
.acc-bind .bind-no { color: var(--faint); }

/* ---------- 通用控件 ---------- */
button {
  background: var(--pri); color: #fff; border: none; border-radius: 9px;
  padding: 8px 15px; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .16s, transform .06s, box-shadow .16s;
  font-family: inherit; letter-spacing: -.005em;
}
button:hover { background: var(--pri-dark); }
button:active { transform: scale(.975); }
button.ghost {
  background: rgba(255,255,255,.9); color: var(--txt-2);
  border: 1px solid var(--line-2); box-shadow: 0 1px 1px rgba(0,0,0,.03);
}
button.ghost:hover { background: #fff; border-color: rgba(0,0,0,.2); }
button.danger { background: var(--bad); }
button.danger:hover { background: #b3000f; }
button.ok { background: var(--ok); }
button.ok:hover { background: #146c2e; }
button:disabled { opacity: .38; cursor: not-allowed; transform: none; }
button:focus-visible { outline: none; box-shadow: 0 0 0 3.5px var(--pri-soft); }

input, select {
  padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px;
  font-size: 13px; background: #fff; color: var(--txt); font-family: inherit;
  transition: .16s;
}
/* 点按即响应，不要 300ms 延迟、不要双击放大整页 */
button, input, select, .ld { touch-action: manipulation; }
input:focus, select:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3.5px var(--pri-soft); }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; gap: 18px; background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line); border-radius: 14px; padding: 9px 16px; margin-bottom: 16px;
  position: sticky; top: 10px; z-index: 60;
}
.topbar .brand { font-weight: 650; font-size: 15px; letter-spacing: -.02em; }
.topbar nav { display: flex; gap: 2px; flex: 1; background: rgba(0,0,0,.045); border-radius: 9px; padding: 2px; width: fit-content; flex: 0 0 auto; }
.topbar nav button {
  background: transparent; color: var(--txt-2); padding: 6px 13px; border-radius: 7px;
  font-size: 13px; font-weight: 500; box-shadow: none;
}
.topbar nav button:hover { background: rgba(0,0,0,.04); }
.topbar nav button.on { background: #fff; color: var(--txt); box-shadow: 0 1px 3px rgba(0,0,0,.10); font-weight: 600; }
.topbar .me { color: var(--sub); font-size: 12.5px; display: flex; gap: 10px; align-items: center; margin-left: auto; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: rgba(0,0,0,.05); color: var(--sub); letter-spacing: .01em; }
.badge.draft { background: #fff4d6; color: #8a5a00; }
.badge.prepared { background: #e3f0ff; color: #0a5cc0; }
.badge.signed { background: #e3f7e8; color: #146c2e; }
.badge.locked { background: #e8e8ed; color: #48484a; }

.card {
  background: var(--card); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.03);
}
.card h2 { font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.015em; }
.card h2 small { color: var(--sub); font-weight: 400; font-size: 12px; letter-spacing: 0; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.toolbar .spacer { flex: 1; }
.toolbar select { font-weight: 600; font-variant-numeric: tabular-nums; }
.msg { padding: 10px 14px; border-radius: 10px; font-size: 13px; margin: 10px 0 0; display: none; }
.msg.show { display: block; }
.msg.err { background: #fff2f2; color: var(--bad); }
.msg.good { background: #effaf1; color: var(--ok); }

/* ================= 工资表 =================
 * 桌面不再套"滚动窗口"：一家公司就三五个人，整张表铺开看，别让人隔着滚动条数人。
 * 宽度就容器 100%，17 列挤到 1280 屏也能一屏放下；只有主动展开累计明细时才横滑。
 */
.table-wrap {
  overflow: visible; border-radius: 12px;
  border: 1px solid var(--line);
  scrollbar-width: thin;
}
.table-wrap.wide { overflow-x: auto; overflow-y: hidden; }
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.3); background-clip: content-box; }

table.pay {
  border-collapse: separate; border-spacing: 0;
  font-size: 12px;
  /* 铺满容器；内容的最低可读宽度由各列 padding/输入框撑着，窄屏时才会横滑 */
  width: 100%; min-width: 1120px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* 单元格默认无边框——这是去噪的关键，靠斑马纹和留白分隔 */
table.pay th, table.pay td {
  padding: 9px 5px 9px 4px; text-align: right; white-space: nowrap;
  border: none; border-bottom: 1px solid var(--line);
  background: var(--rb, var(--z1));
}
table.pay td { color: var(--txt-2); }
table.pay td.l, table.pay th.l { text-align: left; }
table.pay td.num { letter-spacing: -.01em; min-width: 44px; }

/* ---- 累计明细视图：一屏铺满，不要横滑 ----
 * 展开是为了核个税，不是为了看更多列。所以录入用的列让位（见 TAX_VIEW_DROP），
 * 剩下的列字号紧一档、格子窄一档，1440 正好铺满、1280 也不把列名压成竖排。 */
table.pay.tax-view { font-size: 11px; }
table.pay.tax-view th, table.pay.tax-view td { padding: 8px 3px; }
table.pay.tax-view td.num { min-width: 0; }
table.pay.tax-view td input { width: 52px; font-size: 11px; padding: 2px 3px; }
table.pay.tax-view thead tr.col-row th { letter-spacing: 0; }

/* ---- 表头：两级。上层是分区带，下层是列名 ----
 * 不再吸附：表格整张铺开、三五个人一屏就看完了，吸顶只会跟顶栏打架 */
table.pay thead th {
  position: static;
  background: #fbfbfd;
  font-weight: 600; font-size: 11.5px; color: var(--sub);
  letter-spacing: .01em;
  border-bottom: 1px solid var(--line-2);
  padding: 7px 5px 7px 4px;
}
table.pay thead tr.grp-row th {
  height: 24px; padding: 0 6px; font-size: 10.5px; font-weight: 650;
  letter-spacing: .06em; color: var(--faint);
  background: #f6f6f9; border-bottom: 1px solid var(--line);
  text-align: center; line-height: 24px;
}
table.pay thead tr.col-row th.gs { border-left: 1px solid var(--line-2); }
table.pay thead tr.grp-row th.gs { border-left: 1px solid var(--line-2); }
/* 列名换行，避免"本月应交个人所得税"把整列撑宽 */
table.pay thead tr.col-row th { line-height: 1.3; white-space: normal; }
/* 列名按 | 分段，段内不折：窄列也不许把「（单位）」拆成一字一行 */
table.pay thead tr.col-row th .lb { display: inline-block; white-space: nowrap; }
table.pay thead tr.col-row th.nw { white-space: nowrap; }

/* ---- 斑马纹 ---- */
table.pay tbody tr:nth-child(even) { --rb: var(--z2); }
table.pay tbody tr { transition: background .12s; }
table.pay tbody tr:hover { --rb: var(--row-hover); }
table.pay tbody tr:hover td { color: var(--txt); }

/* ---- 姓名列吸附：手机横滑时不丢人（桌面不横滑，等于普通列） ----
 * 只用一根 1px 细线收边，和「分区线」同一套视觉。
 * 原来那条模糊阴影会盖在右边那一列上、看着像脏了，已去掉。 */
table.pay th.sticky-name, table.pay td.sticky-name {
  position: sticky; left: 0; z-index: 2;
  border-right: 1px solid var(--line-2);
  font-weight: 600; color: var(--txt);
  min-width: 68px;
}
table.pay thead th.sticky-name { z-index: 4; }
table.pay td.seq-num { text-align: center; color: var(--faint); font-size: 11px; min-width: 26px; }
table.pay tbody tr:first-child td { border-top: none; }

/* ---- 可编辑格：平时像文字，悬停才浮出输入框 ---- */
table.pay td input {
  width: 62px; text-align: right; padding: 3px 4px; font-size: 12px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--txt); font-variant-numeric: tabular-nums; font-family: inherit;
  transition: .14s;
}
table.pay td input:hover { background: #fff; border-color: var(--line-2); }
table.pay td input:focus { background: #fff; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); outline: none; }
table.pay td.dirty { background: #fff8e6 !important; }
table.pay td.dirty input { border-color: #f0b429; background: #fff; }

/* ---- 正在编辑的那一格：整行 + 整列淡淡托底。
 * 三十来列横着看，眼睛最容易串行，这一层底色就是防串行的。 ---- */
table.pay tbody tr.axis-row > td { background: #d8e6fa; }
table.pay tbody tr.axis-row > td.net-cell { background: #d8e6fa; }
table.pay tbody td.axis-col { background: rgba(0, 113, 227, .085); }
table.pay tbody tr.axis-row > td.dirty,
table.pay tbody td.axis-col.dirty { background: #fff8e6 !important; }

/* ---- 数字语义 ---- */
table.pay .z { color: var(--faint); }          /* 0 值淡化，眼睛自动跳过 */
table.pay td.zero { color: var(--faint); }
table.pay td.emph { color: var(--txt); font-weight: 600; }       /* 应发、个税：结果级 */
/* 实发只给字色加重量，不再每行铺一层绿底——
 * 那一条绿带会把整行拦腰截断，右边几列看着像另一张表。 */
table.pay td.net-cell { color: #0f6b32; font-weight: 700; }
table.pay td.ded { color: var(--bad); }        /* 扣款项有值时给一点红，便于扫读 */

/* ---- 请假格：金额 + 天数 ---- */
table.pay td.leave-cell { line-height: 1.15; }
table.pay td.leave-cell input { display: block; margin-left: auto; }
table.pay td.leave-cell .ld {
  display: block; font-size: 10px; color: var(--faint); cursor: pointer;
  margin-top: 2px; text-align: right; letter-spacing: .02em;
  white-space: nowrap; transition: color .14s;
}
table.pay td.leave-cell .ld:hover { color: var(--pri); }
table.pay td.leave-cell .ld.has { color: var(--pri); font-weight: 600; }
/* 没请假的人不显示"填天数"，行悬停才浮出来——平时别拿小字干扰读数 */
table.pay td.leave-cell .ld.ld-hint { opacity: 0; transition: opacity .12s; }
table.pay tbody tr:hover td.leave-cell .ld.ld-hint { opacity: .8; }
table.pay td.leave-cell .ld-in { width: 56px; font-size: 11px; padding: 2px 4px; margin-left: auto; }
table.pay td.leave-cell .ld-ro { display: block; font-size: 10px; color: var(--faint); }

/* ---- 合计行 ---- */
table.pay tfoot td {
  position: static;
  background: #f4f4f7; font-weight: 700; color: var(--txt);
  border-top: 1px solid var(--line-2); border-bottom: none;
  font-size: 12px;
}
table.pay tfoot td.net-cell { background: #e9f5ec; color: #0f6b32; }
table.pay tfoot tr.upper-row td {
  background: #fbfbfd; font-weight: 500; color: var(--sub); font-size: 11px;
  letter-spacing: .04em; border-top: none; height: 26px;
}

/* ---- 一句数据说明：只陈述事实，不做彩色卡片、不画格子 ---- */
.sub-note {
  margin-top: 10px; font-size: 11.5px; color: var(--faint); letter-spacing: .01em;
}

/* ---- 悬浮保存（只在触屏端出现，手够得着） ---- */
.fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90; display: none;
  padding: 12px 20px; border-radius: 99px; font-size: 13.5px; font-weight: 650;
  background: var(--pri); color: #fff;
  box-shadow: 0 6px 20px rgba(0, 113, 227, .38), 0 2px 6px rgba(0, 0, 0, .12);
}
.fab[hidden] { display: none !important; }

/* ---- 低频操作折叠：桌面上完全展开（display:contents 让按钮直接参与工具条布局） ---- */
.more-acts { display: contents; }
.more-toggle { display: none; }
.only-narrow { display: none; }

/* ---- 人员拖拽排序：按住序号/姓名拖，落点画一条蓝线 ---- */
td.drag-handle { cursor: grab; }
td.drag-handle:active { cursor: grabbing; }
tr.dragging { opacity: .4; }
tr.drop-before > td { box-shadow: inset 0 2px 0 var(--pri); }
tr.drop-after > td { box-shadow: inset 0 -2px 0 var(--pri); }

/* ---- 公司块 ---- */
.company-block { margin-bottom: 34px; }
.company-block:last-child { margin-bottom: 0; }
/* 一屏一家：没选中的公司只是不显示，DOM 还在（打印时全出来） */
.company-block.is-off { display: none; }

/* ---- 公司切换：分段控件 ---- */
.co-tabs {
  display: flex; gap: 2px; padding: 3px; margin: 0 0 16px;
  background: #f0f1f4; border-radius: 9px; width: max-content; max-width: 100%;
}
.co-tabs button {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 6px 15px; border-radius: 7px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--sub);
  transition: background .15s, color .15s, box-shadow .15s;
}
.co-tabs button i {
  font-style: normal; font-weight: 500; font-size: 11px;
  color: var(--faint); margin-left: 5px;
}
.co-tabs button:hover { color: var(--txt); }
.co-tabs button.on {
  background: #fff; color: var(--txt);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 0 0 .5px rgba(0, 0, 0, .05);
}
.co-tabs button.on i { color: var(--pri); }
.co-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 4px 2px 12px;
}
.co-name { font-size: 15px; font-weight: 650; letter-spacing: -.015em; color: var(--txt); }
.co-tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px;
  background: rgba(0,0,0,.05); color: var(--sub); font-size: 11px; font-weight: 600;
  vertical-align: 2px;
}
.co-stats { display: flex; gap: 22px; margin-left: auto; }
.co-stats div { text-align: right; }
.co-stats i { display: block; font-style: normal; font-size: 10.5px; color: var(--faint); letter-spacing: .04em; margin-bottom: 1px; }
.co-stats b { font-size: 13.5px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.co-stats .s-net b { color: #0f6b32; }

.taxdetail { color: var(--faint); font-size: 11.5px; }

/* ---- 签字栏 ---- */
.sign-row {
  display: flex; gap: 34px; margin-top: 18px; color: var(--txt-2); font-size: 12.5px;
  flex-wrap: wrap;
}
/* 有签名时这一格会长高：让"主管："跟着沉到签字线上，别飘在签名图上面 */
.sign-row > div { display: flex; align-items: flex-end; gap: 2px; }
.sign-row span {
  display: inline-block; min-width: 120px; border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
}
.sign-time { margin-top: 10px; color: var(--faint); font-size: 11.5px; }
/* 手写签名：图压在签字线上，名字小字跟在下面 */
.sig-img { display: block; height: 38px; width: auto; max-width: 150px; margin-bottom: 1px; }
.sig-by { display: block; font-style: normal; font-size: 10px; color: var(--faint); line-height: 1.2; }

/* ---- 签名板 ---- */
.sign-mask {
  position: fixed; inset: 0; z-index: 120; background: rgba(16, 18, 22, .42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.sign-box {
  width: 520px; max-width: 100%; background: #fff; border-radius: 16px;
  padding: 18px 18px 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}
.sign-title { font-size: 15px; font-weight: 650; color: var(--txt); letter-spacing: -.01em; }
.sign-sub { margin-top: 4px; font-size: 12px; color: var(--faint); line-height: 1.5; }
.sign-canvas {
  display: block; width: 100%; height: 160px; margin-top: 12px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background:
    linear-gradient(to bottom, transparent calc(100% - 30px), var(--line) calc(100% - 30px), var(--line) calc(100% - 29px), transparent calc(100% - 29px)),
    #fcfcfe;
  touch-action: none; cursor: crosshair;
}
.sign-tip { margin-top: 7px; font-size: 11.5px; color: var(--faint); }
.sign-comment {
  display: block; width: 100%; margin-top: 10px; padding: 8px 10px;
  border: 1px solid var(--line-2); border-radius: 9px; font-size: 13px; font-family: inherit;
}
.sign-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ---------- 台账/档案 ---------- */
table.plain { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
table.plain th, table.plain td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--line); background: var(--rb, transparent); }
table.plain th.l, table.plain td.l { text-align: left; }
table.plain thead th { background: #fbfbfd; color: var(--sub); font-weight: 600; font-size: 12px; }
table.plain tbody tr:nth-child(even) { --rb: var(--z2); }
table.plain tbody tr:hover { --rb: var(--row-hover); }
.audit-list li { padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--sub); font-size: 12.5px; list-style: none; }
.audit-list li b { color: var(--txt); font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.form-grid label { font-size: 11.5px; color: var(--sub); display: block; margin-bottom: 4px; letter-spacing: .01em; }
.form-grid input, .form-grid select { width: 100%; }

/* ================= 档案 / 设置 / 台账：一行一项，别堆格子 ================= */
.page-head { display: flex; align-items: flex-end; gap: 16px; margin: 4px 2px 13px; }
.page-head h2 { font-size: 20px; font-weight: 650; letter-spacing: -.025em; }
.page-head h2 small { font-size: 12.5px; font-weight: 400; color: var(--sub); margin-left: 8px; letter-spacing: 0; }
.page-head p { color: var(--sub); font-size: 12.5px; line-height: 1.55; margin-top: 5px; max-width: 780px; }
.page-head > button { margin-left: auto; flex: 0 0 auto; }
.page-head.sub { margin-top: 26px; }

/* 公司卡：一家一卡，隔行浅底 */
.co-card {
  background: var(--card); border-radius: 14px; margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,.045);
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 18px rgba(0,0,0,.025);
  overflow: hidden;
}
.co-card-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 10px; }
.co-card-head h3 { font-size: 14px; font-weight: 650; letter-spacing: -.015em; }
.co-meta { color: var(--faint); font-size: 11.5px; }

table.emp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
table.emp th, table.emp td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--line); }
table.emp thead th { font-size: 11px; color: var(--faint); font-weight: 600; letter-spacing: .03em; background: #fbfbfd; }
table.emp th.l, table.emp td.l { text-align: left; }
table.emp tbody tr:nth-child(even) { background: #f0f3f8; }
table.emp tbody tr:hover { background: #e4eefb; }
table.emp tbody tr:last-child td { border-bottom: none; }
table.emp td.nm { font-weight: 600; color: var(--txt); white-space: nowrap; }
table.emp tr.off td { color: var(--faint); }
table.emp tr.off td.nm { color: var(--sub); }
table.emp td.act { width: 60px; }
table.emp td.emph { color: var(--txt); font-weight: 650; }
table.emp.ledger tbody tr.lg-row { cursor: default; }
table.emp.ledger tr.lg-detail > td { padding: 2px 12px 12px !important; background: #fbfbfd; }
table.emp.ledger tr.lg-detail table.mini { background: #fff; }

.tag {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 5px;
  background: rgba(0,0,0,.06); color: var(--sub); font-size: 10.5px; font-weight: 600;
  vertical-align: 1px;
}
button.link {
  background: none; border: none; color: var(--pri); font-size: 12.5px;
  padding: 4px 2px; font-weight: 500; box-shadow: none;
}
button.link:hover { background: none; text-decoration: underline; }

/* 设置：两块并排，每块一行一项；左侧标题+说明，右侧控件 */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.set-card {
  background: var(--card); border-radius: 14px; padding: 2px 18px 14px;
  border: 1px solid rgba(0,0,0,.045);
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 18px rgba(0,0,0,.025);
}
.set-card h3 { font-size: 12.5px; font-weight: 650; color: var(--sub); letter-spacing: .03em; padding: 13px 0 4px; }
.set-row { display: flex; align-items: center; gap: 18px; padding: 10px 0; border-top: 1px solid var(--line); }
.set-card h3 + .set-row { border-top: none; }
.set-label { flex: 1 1 auto; min-width: 0; }
.set-label b { display: block; font-size: 13px; font-weight: 500; color: var(--txt); letter-spacing: -.005em; }
.set-label i { display: block; font-style: normal; font-size: 11.5px; color: var(--faint); margin-top: 2px; line-height: 1.45; }
.set-ctl { flex: 0 0 205px; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.set-ctl input, .set-ctl select { width: 100%; font-size: 12.5px; }
.set-ctl input[type="number"] { text-align: right; }
.set-ctl .unit { color: var(--faint); font-size: 12px; flex: 0 0 auto; }
.set-ctl .ro { font-size: 13px; font-weight: 600; color: var(--txt); }
.set-foot { color: var(--faint); font-size: 11.5px; line-height: 1.6; padding: 9px 0 2px; border-top: 1px solid var(--line); }
.set-foot.top { border-top: none; padding: 2px 0 10px; }

.lev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.lev { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.lev span { flex: 1; font-size: 12.5px; color: var(--txt-2); }
.lev input { width: 58px; text-align: right; font-size: 12.5px; }

details.tax-table { border-top: 1px solid var(--line); margin-top: 2px; }
details.tax-table > summary, details.tax-open > summary {
  cursor: pointer; font-size: 12px; color: var(--sub); padding: 10px 0;
  list-style: none; user-select: none;
}
details.tax-open > summary { border-top: 1px solid var(--line); margin-top: 6px; }
summary::-webkit-details-marker { display: none; }
details.tax-table > summary:before, details.tax-open > summary:before {
  content: '›'; display: inline-block; margin-right: 7px; color: var(--faint);
  transition: transform .16s;
}
details[open] > summary:before { transform: rotate(90deg); }

.save-bar { display: flex; align-items: center; gap: 14px; margin: 16px 2px 6px; }
.save-bar span { color: var(--faint); font-size: 11.5px; }

/* 编辑器 */
.set-card.editor { margin-bottom: 12px; }
.ed-head { display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; }
.ed-head h3 { flex: 1; padding: 0; font-size: 15px; color: var(--txt); letter-spacing: -.015em; }
.ed-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.ed-grp { font-size: 10.5px; color: var(--faint); letter-spacing: .07em; padding: 15px 0 1px; }
.ed-grp + .set-row { border-top: none; }
.ed-foot { display: flex; gap: 10px; padding: 16px 0 8px; border-top: 1px solid var(--line); margin-top: 8px; }

table.mini { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.5px; font-variant-numeric: tabular-nums; border-radius: 8px; overflow: hidden; }
table.mini th, table.mini td { padding: 6px 9px; text-align: right; border-bottom: 1px solid var(--line); }
table.mini th { color: var(--faint); font-weight: 600; font-size: 10.5px; background: #fbfbfd; }
table.mini th.l, table.mini td.l { text-align: left; }
table.mini tbody tr:last-child td { border-bottom: none; }

.empty { background: var(--card); border-radius: 14px; padding: 46px 20px; text-align: center; color: var(--faint); font-size: 13px; line-height: 1.9; }

/* ================= 触屏：没有 hover，点下去不要留色块 ================= */
@media (hover: none) {
  table.pay tbody tr:nth-child(even) { --rb: var(--z2); }
  table.pay tbody tr:hover { --rb: inherit; }
  table.pay tbody tr:hover td { color: inherit; }
  table.pay td input:hover { background: transparent; border-color: transparent; }
  table.pay td.leave-cell .ld.ld-hint { opacity: .55; }  /* 触屏没有 hover，"填天数"得常驻 */
  button:hover { background: var(--pri); }
  button.ghost:hover { background: rgba(255, 255, 255, .9); border-color: var(--line-2); }
  button.ok:hover { background: var(--ok); }
  button.danger:hover { background: var(--bad); }
}
@media (pointer: coarse) {
  button { min-height: 38px; padding: 9px 14px; }
  select { min-height: 38px; font-size: 15px; }
}

/* ================= 响应式：笔记本 / 平板 / 手机 ================= */
@media (max-width: 1240px) {
  #app { padding: 18px 16px 36px; }
  .co-stats { gap: 14px; }
  .topbar { gap: 12px; }
}

@media (max-width: 980px) {
  .topbar { flex-wrap: wrap; }
  .topbar nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar .me { margin-left: auto; }
  .set-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  #app { padding: 10px 10px calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* 顶栏：两行 —— 品牌/用户一行，导航横滑一行。不吸附，把高度留给表格 */
  .topbar {
    position: static; gap: 8px; padding: 10px 12px; border-radius: 12px; margin-bottom: 10px;
  }
  .topbar .brand { font-size: 14px; }
  .topbar .brand .taxdetail { display: none; }   /* 版本号别来抢手机那一行 */
  .topbar nav { order: 3; padding: 3px; border-radius: 10px; overscroll-behavior-x: contain; }
  .topbar nav button { flex: 0 0 auto; padding: 9px 14px; font-size: 13.5px; }
  .topbar .me { font-size: 12px; gap: 8px; }
  .topbar .me span { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .me button { padding: 7px 11px; min-height: 34px; }

  /* 低频操作收进「更多」，主操作留在明面上 */
  .only-narrow { display: inline-block; }
  .more-toggle { display: block; }
  .more-acts { display: none; }
  .more-acts.open { display: contents; }

  .card { padding: 12px 10px 14px; border-radius: 14px; margin-bottom: 10px; }
  .card h2 { font-size: 15px; flex-wrap: wrap; }

  /* 工具条：月份独占一行，按钮铺满并保证 40px 触控高度 */
  .toolbar { gap: 6px; }
  .toolbar .spacer { display: none; }
  .toolbar select { flex: 1 1 100%; }
  .toolbar button { flex: 1 1 auto; min-height: 40px; font-size: 13.5px; }
  .toolbar .badge { flex: 0 0 auto; }
  .toolbar .taxdetail { flex: 1 1 100%; }
  /* 手机屏幕窄，大写金额一长就把个税列撑宽；这行只有打印和核对时才用得上 */
  table.pay tfoot tr.upper-row { display: none; }

  /* 表格：整张铺开，只做横向滑动；横滑到头不触发页面返回手势 */
  .table-wrap {
    overflow-x: auto; overflow-y: hidden;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  table.pay { width: max-content; min-width: 0; font-size: 12.5px; }
  table.pay th, table.pay td { padding: 7px 8px; }
  table.pay td.num { min-width: 0; }
  table.pay th.sticky-name, table.pay td.sticky-name { min-width: 66px; }
  table.pay thead th { font-size: 11.5px; }
  /* iOS 聚焦小于 16px 会强行放大整页 —— 这行是必须的 */
  table.pay td input { width: 84px; font-size: 16px; min-height: 36px; padding: 5px 7px; }
  table.pay td.leave-cell input { width: 84px; }
  table.pay td.leave-cell .ld { font-size: 11.5px; padding: 4px 0 2px; }

  /* 公司抬头：合计从右侧挪到下一行，三等分排开 */
  .company-block { margin-bottom: 22px; }
  .co-head { gap: 6px; padding-bottom: 8px; }
  .co-name { font-size: 14px; }
  .co-stats { width: 100%; margin-left: 0; gap: 0; justify-content: space-between; padding: 6px 8px; background: #fafafc; border-radius: 9px; }
  .co-stats div { text-align: left; }
  .co-stats b { font-size: 13px; }

  .sign-row { gap: 12px 18px; font-size: 12px; }
  .sign-row span { min-width: 78px; }
  .sign-img { height: 30px; max-width: 96px; }
  .sign-mask { padding: 12px; }
  .sign-box { padding: 14px 14px 10px; border-radius: 14px; }
  .sign-canvas { height: 140px; margin-top: 10px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  table.plain { font-size: 12px; }
  table.plain th, table.plain td { padding: 8px 6px; }
  .fab { display: block; }

  /* 档案 / 设置 / 台账 */
  .page-head { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  .page-head h2 { font-size: 18px; }
  .page-head p { font-size: 12px; }
  .page-head > button { margin-left: 0; width: 100%; }
  .co-card-head { padding: 12px 12px 8px; }
  table.emp { min-width: 0; font-size: 12px; }
  table.emp th, table.emp td { padding: 9px 8px; }
  table.emp th:nth-child(4), table.emp td:nth-child(4),
  table.emp th:nth-child(5), table.emp td:nth-child(5) { display: none; }  /* 手机先藏两个社保列 */
  .set-card { padding: 2px 12px 12px; }
  .set-row { gap: 12px; }
  .set-ctl { flex-basis: 132px; }
  .set-label b { font-size: 12.5px; }
  .ed-cols { grid-template-columns: 1fr; gap: 0; }
  .ed-grp { padding-top: 12px; }
  .save-bar { flex-wrap: wrap; }
  .save-bar button { width: 100%; }
}

@media (max-width: 560px) {
  #app { padding: 8px 6px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .login-wrap { padding: 0 14px; }
  .login-card { width: 100%; padding: 32px 22px 26px; border-radius: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .co-stats div { flex: 1 1 0; }
  .co-stats b { font-size: 12.5px; }
  .card h2 small { flex: 1 1 100%; }
  .toolbar button { font-size: 13px; }
}

/* 手机横屏：宽度够但只四百来像素高，把顶栏和留白压扁，全部让给表格 */
@media (max-height: 500px) and (orientation: landscape) {
  #app { padding: 8px 10px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .topbar { position: static; padding: 6px 10px; margin-bottom: 8px; }
  .card { padding: 10px; margin-bottom: 8px; }
  .co-head { padding-bottom: 6px; }
  .table-wrap { border-radius: 0; }
  .fab { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 打印：退回 Excel 原貌（黑框、无斑马纹、无吸附） ---------- */
.print-head { display: none; }
@media print {
  body { background: #fff; }
  #app { max-width: none; padding: 0; }
  .topbar, .toolbar, .no-print, .msg { display: none !important; }
  .card { box-shadow: none; border: none; padding: 0; border-radius: 0; }
  .table-wrap { overflow: visible; max-height: none; border: none; border-radius: 0; }
  .print-head { display: block; text-align: center; margin-bottom: 12px; }
  .print-head h1 { font-size: 18px; }
  .co-head { padding: 0; margin-bottom: 4px; }
  .co-stats, .co-tag { display: none; }
  .company-block { page-break-after: always; break-after: page; margin-bottom: 0; }
  .company-block:last-child { page-break-after: auto; break-after: auto; }
  /* 屏幕上一次只看一家，打印必须三家都出来（每份一张纸） */
  .company-block.is-off { display: block !important; }
  .co-name { font-size: 15px; text-align: center; width: 100%; display: block; }
  .co-head { display: block; text-align: center; }

  table.pay { font-size: 10px; border-collapse: collapse; width: 100% !important; }
  table.pay th, table.pay td {
    border: 1px solid #000 !important; padding: 3px 4px;
    background: #fff !important; position: static !important;
    box-shadow: none !important; color: #000 !important;
    font-weight: 400;
  }
  table.pay thead tr.grp-row { display: none; }
  table.pay thead th { background: #f0f0f0 !important; font-size: 10px; }
  table.pay td input { border: none; background: none; width: auto; padding: 0; }
  table.pay td.leave-cell .ld { display: none; }
  table.pay tfoot td { font-weight: 700; }
  table.pay tfoot tr.upper-row { display: table-row !important; }  /* 手机上隐藏了，打印必须回来 */
  table.pay td.net-cell, table.pay tfoot td.net-cell { background: #fff !important; font-weight: 700; }
  .sign-row { page-break-inside: avoid; }
}