/* ============================================================
   宣讲会信息收集系统 —— 样式表
   设计基调：政企专业风 / 中国南方电网蓝(#264480) + 白 + 冷灰；light theme
   ============================================================ */

:root {
  --brand-900: #12305E;
  --brand-800: #1B3A72;
  --brand-700: #264480;
  --brand-600: #2E5399;
  --brand-500: #3E6BC4;
  --brand-100: #E7EDF9;
  --brand-50:  #F3F7FD;

  --ink:      #15243A;
  --ink-2:    #3B4C66;
  --muted:    #6A7B94;
  --line:     #E0E7F1;
  --line-2:   #EDF1F8;
  --bg:       #F4F7FB;
  --card:     #FFFFFF;

  --ok:   #1B7A4B;
  --warn: #B7791F;
  --err:  #C0392B;
  --info: #1E6FA8;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --shadow-1: 0 1px 2px rgba(21,36,58,.07), 0 1px 3px rgba(21,36,58,.05);
  --shadow-2: 0 6px 24px rgba(21,36,58,.10), 0 2px 6px rgba(21,36,58,.06);
  --shadow-3: 0 18px 50px rgba(18,48,94,.20);
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: .2px; }
p { margin: 0; }
a { color: var(--brand-700); text-decoration: none; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--brand-100); color: var(--brand-800); padding: 1px 6px; border-radius: 4px; font-size: .92em; }
.muted { color: var(--muted); font-size: 13px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(96deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 2px 12px rgba(18,48,94,.26);
}
.topbar__inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px; height: 60px;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; flex: 0 0 auto; }
.brand__mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: #fff; color: var(--brand-700);
  display: grid; place-items: center; flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(18,48,94,.22);
}
/* 官方标志（PNG，透明底蓝标），放在白色圆角底片上 */
.brand__logo { width: 28px; height: auto; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__text strong { font-size: 15px; font-weight: 600; letter-spacing: .3px; }
.brand__text em { font-style: normal; font-size: 11px; opacity: .72; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  color: rgba(255,255,255,.82); padding: 7px 14px; border-radius: 8px;
  font-size: 13.5px; transition: .16s; white-space: nowrap;
}
.nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav a.is-active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.userchip {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  background: rgba(255,255,255,.12); padding: 5px 12px 5px 6px; border-radius: 999px;
}
.userchip b { font-weight: 600; }
.userchip span { opacity: .8; font-size: 11.5px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 12px; font-weight: 600; }

/* ------------------------------------------------------------ layout */
.wrap { max-width: 1080px; margin: 0 auto; padding: 22px 20px 90px; }
.wrap--wide { max-width: 1320px; }
.view { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-1);
}
.card__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card__hd h2 { font-size: 15px; }
.card__hint { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.card__act { display: flex; gap: 8px; align-items: center; }
.card__hd .card__hint:not(:last-child) { margin-right: 4px; }
.card--bar { padding: 16px 18px 14px; }
.barfilter { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.barfilter__act { display: flex; gap: 8px; margin-left: auto; }
.btn--sm { padding: 6px 13px; font-size: 12.5px; }
.dupbadge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  background: #FDEDEB; color: #A03425; border: 1px solid #F5CFCA;
  padding: 3px 10px; border-radius: 999px; font-weight: 600;
}
.dupbadge--none { background: var(--brand-50); color: var(--brand-800); border-color: #C4D2EA; }
.tag-dup {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; background: #FDEDEB; color: #A03425; border: 1px solid #F5CFCA;
}
.tag-dup--weak { background: #FDF8EC; color: #8A6416; border-color: #F0DFB8; }
.tag-ok { display: inline-block; font-size: 11.5px; color: var(--muted); }
/* 已删除留痕标签（仅超管在数据明细里看得到） */
.tag-del {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; background: #EDF1F8; color: #6B7A8D; border: 1px solid #D8DEE9;
}
.dt tbody tr.is-dup > td { background: #FFF6F5 !important; }
.dt tbody tr.is-dup--weak > td { background: #FFFCF4 !important; }
.dt tbody tr.is-dup:hover > td { background: #FDEDEB !important; }
.dt tbody tr.is-dup--weak:hover > td { background: #FDF8EC !important; }
/* 软删除行整行灰显（覆盖重复行底色，已删除记录不参与重复判定） */
.dt tbody tr.is-deleted > td { background: #F4F6F8 !important; color: #8B98A6 !important; }
.dt tbody tr.is-deleted:hover > td { background: #EEF1F5 !important; }
.dt tbody tr.is-deleted .cell-code { color: #8B98A6; }
.dt tbody tr.is-deleted .pill { background: #E7EBF1; color: #8B98A6; }
.dt tbody tr.is-deleted .tag-dup { background: #E7EBF1; color: #8B98A6; border-color: #D8DEE9; }
.tablewrap--tall { max-height: 52vh; }
.step {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  background: var(--brand-100); color: var(--brand-800);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.stack { display: flex; flex-direction: column; gap: 12px; }

/* -------------------------------------------------------------- hero */
.hero {
  background:
    radial-gradient(1100px 260px at 12% -30%, rgba(78,130,215,.34), transparent 62%),
    linear-gradient(120deg, var(--brand-900), var(--brand-700) 70%, var(--brand-600));
  color: #fff; padding: 32px 20px 30px;
}
.hero__inner { max-width: 1040px; margin: 0 auto; }
.hero h1 { font-size: 23px; letter-spacing: .5px; }
.hero p { margin-top: 8px; font-size: 13.5px; color: rgba(255,255,255,.82); max-width: 720px; }
.hero p strong { color: #fff; }
.hero__stats { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
.hero__stats div { display: flex; flex-direction: column; }
.hero__stats b { font-size: 21px; font-weight: 600; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.hero__stats span { font-size: 12px; color: rgba(255,255,255,.7); }
.hero__act { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); align-items: center; flex-wrap: wrap; }
.hero__act .hero__who { font-size: 13px; color: rgba(255,255,255,.78); }
.hero__act .hero__who b { color: #fff; font-weight: 600; }
.btn--onhero { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; }
.btn--onhero:hover:not(:disabled) { background: rgba(255,255,255,.26); }

/* ------------------------------------------------------------- forms */
.grid { display: grid; gap: 14px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* line-height 收紧，长标签折成两行时不至于把整行撑高；
   text-wrap: balance 让折行更均衡（不支持的浏览器自动忽略，退化为普通换行） */
.field__label { font-size: 12.5px; color: var(--ink-2); font-weight: 500; line-height: 1.45; text-wrap: balance; }
.field__label i { color: var(--err); font-style: normal; }
/* 行内校验的错误文案：常驻在 .field 内、输入框下方（.field 是 flex column，gap 6px 自带间距），
   出错时切 hidden 显示。注意不要动下方 .g-personnel .field__label 的贴底布局手法，
   文案只在出错那一列占一行高度，同排其它列的控件上沿不受影响。 */
.field__err { font-size: 12px; color: var(--err); line-height: 1.4; }
input[type=text], input[type=tel], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; font-family: inherit; font-size: 13.5px; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; transition: border-color .15s, box-shadow .15s; appearance: none;
}
textarea { resize: vertical; min-height: 56px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(62,107,196,.16);
}
input::placeholder, textarea::placeholder { color: #A9B6BE; }
input.is-error, select.is-error { border-color: var(--err); background: #FFF8F7; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236B7C89' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

/* ------------------------------------------------------------ combos */
.combo { position: relative; }
.combo__input { cursor: pointer; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236B7C89' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.combo__list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-2); max-height: 280px; overflow: auto; padding: 4px;
}
/* 下方空间不够时由 JS 加上这个类，面板翻到输入框上方展开 */
.combo__list--up { top: auto; bottom: calc(100% + 4px); }
.combo__list input { border: none; box-shadow: none; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 8px 8px; position: sticky; top: 0; background: #fff; z-index: 2; }
.combo__list input:focus { box-shadow: none; }
.combo__opt { padding: 7px 9px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo__opt:hover, .combo__opt.is-hi { background: var(--brand-50); color: var(--brand-800); }
.combo__opt.is-on { background: var(--brand-100); color: var(--brand-800); font-weight: 600; }
.combo__tick { float: right; color: var(--brand-600); font-weight: 700; }

/* ------- 多选下拉（参会场次）：已选场次以标签形式回显 ------- */
.combo--multi .combo__box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  min-height: 38px; padding: 5px 26px 5px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236B7C89' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.combo--multi .combo__box:hover { border-color: var(--brand-500); }
.combo--multi:focus-within .combo__box { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(62,107,196,.16); }
.combo--multi .combo__input {
  flex: 1 1 84px; min-width: 84px; width: auto; height: 24px; padding: 3px 2px;
  border: none; box-shadow: none; background: none; cursor: text;
}
.combo--multi .combo__input:focus { border: none; box-shadow: none; }
.combo__tags { display: contents; }
.combo__tags:empty { display: none; }
.combo__tag {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 2px 6px; border-radius: 4px; background: var(--brand-100); color: var(--brand-800);
  font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo__tag i { font-style: normal; cursor: pointer; opacity: .55; font-size: 13px; line-height: 1; }
.combo__tag i:hover { opacity: 1; color: var(--err); }
.combo__empty { padding: 10px; color: var(--muted); font-size: 12.5px; text-align: center; }

/* ----------------------------------------------------------- buttons */
.btn {
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: .15s; white-space: nowrap; display: inline-flex;
  align-items: center; justify-content: center; gap: 6px; background: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--brand-700); color: #fff; box-shadow: var(--shadow-1); }
.btn--primary:hover:not(:disabled) { background: var(--brand-600); }
.btn--ghost { background: #fff; border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover:not(:disabled) { border-color: var(--brand-500); color: var(--brand-700); background: var(--brand-50); }
.btn--danger { background: #fff; border-color: #F0C9C4; color: var(--err); }
.btn--danger:hover:not(:disabled) { background: #FDEDEB; }
.btn--danger-solid { background: var(--err); color: #fff; box-shadow: var(--shadow-1); }
.btn--danger-solid:hover:not(:disabled) { background: #A93226; }
.btn--sm { padding: 5px 10px; font-size: 12.5px; }
.btn--lg { padding: 12px 30px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--add { width: 100%; border-style: dashed; margin-top: 10px; }

/* ------------------------------------------------------ block picker */
.blockpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* 未登录只剩「参会人员信息」一个板块时，别留两格空白 */
.blockpick--single { grid-template-columns: minmax(0, 420px); }
.blockcard {
  border: 1.5px solid var(--line); border-radius: var(--r); padding: 14px 15px;
  cursor: pointer; transition: .16s; background: #fff; position: relative;
}
.blockcard:hover { border-color: var(--brand-500); background: var(--brand-50); }
.blockcard.is-on { border-color: var(--brand-700); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(62,107,196,.15); }
.blockcard.is-on::after {
  content: "✓"; position: absolute; top: 10px; right: 12px;
  color: var(--brand-700); font-weight: 700; font-size: 13px;
}
.blockcard h3 { font-size: 14.5px; color: var(--brand-800); }
.blockcard p { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* --------------------------------------------------------- items row */
.itemrow {
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 14px;
  margin-bottom: 10px; background: #FBFCFE;
}
.itemrow__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.itemrow__idx { font-size: 12.5px; color: var(--brand-700); font-weight: 600; background: var(--brand-100); padding: 2px 9px; border-radius: 999px; }
.itemrow__del { margin-left: auto; color: var(--muted); background: none; border: none; cursor: pointer; font-size: 12.5px; padding: 3px 8px; border-radius: 5px; font-family: inherit; }
.itemrow__del:hover { color: var(--err); background: #FDEDEB; }
.itemrow__grid { display: grid; gap: 12px; }
/* 第 3 列是「是否分子公司招聘宣讲工作负责人」（18 个汉字，要求完整显示、不缩写）：
   minmax(168px, ...) 保证该列宽度足够，让标签稳定折成两行；其余 5 列按比例分摊剩余宽度 */
.g-personnel { grid-template-columns: 1fr 1.5fr .8fr .8fr 1.3fr 1fr; }
/* 明细行 label 统一预留两行高度（12.5px × 1.45 × 2 ≈ 2.9em）：
   否则长标签折行会把那一列的控件压低，同排的 select/input 高低错落。
   flex + align-items: flex-end 让文字在预留高度内「贴底」——
   短标签（1 行）不再悬在顶部、与下方控件之间空出一整行，
   而是与长标签（2 行）的最后一行齐平，控件上沿随之一致。
   文本仍是 inline 流，折行 / text-wrap: balance 行为不变。 */
.g-personnel .field__label { min-height: 2.9em; display: flex; align-items: flex-end; }
/* flex 行布局不会为纯空白生成 flex item，文本与必填星号之间的空格会被吃掉，这里补回来 */
.g-personnel .field__label i { margin-left: 2px; }
.g-interview { grid-template-columns: 2fr 1fr 1fr; }
.g-material  { grid-template-columns: 2fr 1fr 1fr; }
/* 面试间数量为 0 时「面试官配比（每组）」整条隐藏，网格收回两列（否则右侧空一格）
   只在桌面端生效：≤860px 的断点已经把 .g-interview 改成 1fr 1fr / 1fr，无需再加规则 */
@media (min-width: 861px) {
  .g-interview.g-interview--2col { grid-template-columns: 2fr 1fr; }
}

/* --------------------------------------------------------- submitbar */
.submitbar { display: flex; align-items: center; gap: 16px; justify-content: flex-end; margin-top: 4px; }
.submitbar__err {
  flex: 1; color: var(--err); background: #FDEDEB; border: 1px solid #F5CFCA;
  padding: 9px 13px; border-radius: var(--r-sm); font-size: 13px;
}

/* ------------------------------------------------------------- login */
.loginwrap { max-width: 400px; margin: 60px auto; padding: 0 20px; }
.card--login { padding: 26px 24px; }
.card--login h1 { font-size: 19px; margin-bottom: 6px; }
.card--login .muted { margin-bottom: 18px; }
.card--login .field { margin-bottom: 13px; }

/* ------------------------------------------------------------ pagehd */
.pagehd { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.pagehd h1 { font-size: 20px; }
.pagehd p { margin-top: 3px; }
.pagehd__act { margin-left: auto; display: flex; gap: 9px; }

/* -------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; box-shadow: var(--shadow-1); position: relative; overflow: hidden;
}
.stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand-500); }
.stat--b::before { background: var(--info); }
.stat--c::before { background: var(--warn); }
.stat--err::before { background: var(--err); }
.stat--err .stat__value { color: var(--err); }
.dt td.dup-num { color: var(--err); }
.dt tbody tr.is-total > td { background: var(--brand-100) !important; font-weight: 600; color: var(--brand-900); }
.dt tbody tr.is-total:hover > td { background: var(--brand-100) !important; }
.pager__size { width: auto; padding: 5px 8px; font-size: 12.5px; }
.stat__label { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.stat__value { font-size: 24px; font-weight: 600; letter-spacing: .5px; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat__sub b { color: var(--brand-700); font-weight: 600; }

/* -------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tab {
  background: none; border: none; font-family: inherit; font-size: 14px; color: var(--muted);
  padding: 9px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--brand-700); }
.tab.is-active { color: var(--brand-700); border-bottom-color: var(--brand-700); font-weight: 600; }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.subtab {
  font-family: inherit; font-size: 13px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer;
}
.subtab.is-active { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

/* ----------------------------------------------------------- filters */
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 6px; }
.field--sm { width: 200px; }
.filters__act { display: flex; gap: 8px; margin-left: auto; }
.tableinfo { display: flex; gap: 12px; align-items: center; margin: 12px 0 8px; flex-wrap: wrap; }

/* 横滑提示：桌面端不显示，手机上才出现（见响应式段） */
.tablehint { display: none; align-items: center; gap: 6px; margin: 2px 0 8px;
             font-size: 11.5px; color: var(--muted); }
.tablehint::before { content: "↔"; font-size: 13px; color: var(--brand-500); font-weight: 600; }

/* ------------------------------------------------------------ tables */
.tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); max-height: 62vh; }
.dt { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.8px; white-space: nowrap; }
.dt th, .dt td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); text-align: center; vertical-align: middle; }
.dt thead th {
  position: sticky; top: 0; z-index: 3; background: var(--brand-800); color: #fff !important;
  font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--brand-800); border-right: 1px solid rgba(255,255,255,.14);
}
/* 二级表头：白底深蓝字。这里必须 !important ——
   列定义里的 .cell-code / .cell-strong 等类特异性更高，会把表头文字染成和底色相近的深蓝。 */
.dt thead tr:nth-child(2) th { top: 32px; background: var(--brand-100); color: var(--brand-900) !important; border-bottom: 1px solid #C4D2EA; border-right: 1px solid #DAE3F2; }

/* 数据明细的「操作」列冻结在表格右侧：横向滚动时永远贴右边可见（桌面 / 手机都生效）。
   必须用 .cell-ops 定位，不能用 :last-child —— 数据明细是两层表头，第二行最后一个 th
   是「三折页数量」（操作列在第二行没有 th）；空数据行又只有一个带 colspan 的 td（only-child），
   用 :last-child 会把这两个格子一起粘到右边去。 */
#dt .cell-ops {
  position: sticky; right: 0; z-index: 2;
  box-shadow: inset 1px 0 0 var(--line), -3px 0 6px -4px rgba(21,36,58,.22);
}
/* 上面那条 ID 选择器的特异性高于 .dt thead th，会把表头那格从 z-index:3 压到 2，这里写回。
   层级预算（别随手加大）：表体冻结格 2 < 普通表头 3 < 手机端首列表头 4 < 本格 5
   < 筛选下拉面板 40 < 吸顶导航栏 50 < 弹窗 200 < toast 300。
   取 >50 会让「操作」表头在手机上滚动时浮到吸顶导航栏上面（.tablewrap 在 ≤860px 取消了
   max-height，表头会随页面滚过导航栏），也会压住筛选下拉面板。 */
#dt thead th.cell-ops { z-index: 5; }
/* 冻结列必须自带不透明背景，否则横滑时后面的单元格会从它下面透出来；
   重复 / 疑似重复 / 已删除 / 合计行的行状态色由那些 `tr.is-x > td { … !important }` 自动覆盖 */
#dt tbody td.cell-ops { background: #fff; }
#dt tbody tr:nth-child(even) td.cell-ops { background: #FAFCFB; }
#dt tbody tr:hover td.cell-ops { background: var(--brand-50); }

.dt tbody tr:nth-child(even) { background: #FAFCFB; }
.dt tbody tr:hover { background: var(--brand-50); }
.dt td.is-empty { color: #C7D2D8; }
.dt .cell-code { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--brand-800); }
.dt .cell-strong { font-weight: 600; color: var(--ink); }
.dt .cell-num { font-variant-numeric: tabular-nums; }
.dt--sm td, .dt--sm th { font-size: 12.5px; }
.dt td.tl, .dt th.tl { text-align: left; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; background: var(--brand-100); color: var(--brand-800); }
.pill--b { background: #E4EFF8; color: #1E6FA8; }
.pill--c { background: #FBF1DC; color: #96690F; }
.pill--gray { background: #EDF1F8; color: var(--muted); }

.pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.pager button { font-family: inherit; font-size: 12.5px; padding: 5px 11px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm); cursor: pointer; color: var(--ink-2); }
.pager button:hover:not(:disabled) { border-color: var(--brand-500); color: var(--brand-700); }
.pager button.is-on { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty b { display: block; font-size: 15px; color: var(--ink-2); margin-bottom: 6px; font-weight: 500; }

/* ------------------------------------------------------------ mine cards */
.minecard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-1); }
.minecard__hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.minecard__hd .cell-code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--brand-800); font-weight: 600; }
.minecard__meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12.8px; color: var(--muted); }
.minecard__meta b { color: var(--ink-2); font-weight: 500; }
.minecard__items { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 5px; font-size: 12.8px; color: var(--ink-2); }
.minecard__items div { display: flex; gap: 8px; }
.minecard__items i { font-style: normal; color: var(--brand-700); width: 20px; flex: 0 0 20px; }
.minecard__act { margin-left: auto; display: flex; gap: 7px; }

/* ------------------------------------------------------------- modal */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal__mask { position: absolute; inset: 0; background: rgba(10,28,22,.48); backdrop-filter: blur(2px); }
.modal__box {
  position: relative; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  width: min(720px, 100%); max-height: 88vh; overflow: auto; animation: pop .18s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal__hd { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; }
.modal__hd h2 { font-size: 16px; }
.modal__x { margin-left: auto; background: none; border: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.modal__bd { padding: 18px 20px; }
.modal__ft { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: #fff; }

/* ------------------------------------------------------------ notice */
.notice { border-radius: var(--r); padding: 12px 14px; font-size: 13px; border: 1px solid; margin-bottom: 12px; }
.notice--ok   { background: var(--brand-50); border-color: #C4D2EA; color: var(--brand-800); }
.notice--warn { background: #FDF8EC; border-color: #F0DFB8; color: #8A6416; }
.notice--err  { background: #FDEDEB; border-color: #F5CFCA; color: #A03425; }
.notice--info { background: #F0F7FC; border-color: #CFE2F0; color: #17527C; }
.notice ul { margin: 6px 0 0; padding-left: 18px; }
.notice li { margin: 2px 0; }

.drop {
  border: 1.5px dashed var(--line); border-radius: var(--r); padding: 28px 20px;
  text-align: center; cursor: pointer; transition: .16s; background: #FBFCFE;
}
.drop:hover, .drop.is-over { border-color: var(--brand-500); background: var(--brand-50); }
.drop b { display: block; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.drop span { font-size: 12.5px; color: var(--muted); }
.drop.is-loaded { border-style: solid; border-color: var(--brand-500); background: var(--brand-50); }

/* ------------------------------------------------------------ toast */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: var(--brand-900); color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: 13.5px; box-shadow: var(--shadow-3); z-index: 300; animation: pop .18s ease;
}
.toast--err { background: #8E2B1E; }

/* ------------------------------------------------------- result page */
.done { text-align: center; padding: 26px 10px; }
.done__icon { width: 54px; height: 54px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: grid; place-items: center; margin: 0 auto 14px; font-size: 26px; }
.done h2 { font-size: 18px; }
.done p { color: var(--muted); margin-top: 6px; font-size: 13.5px; }
.done__code { font-family: ui-monospace, Menlo, monospace; font-size: 20px; font-weight: 700; color: var(--brand-800); background: var(--brand-50); border: 1px solid #C4D2EA; padding: 10px 18px; border-radius: var(--r); display: inline-block; margin: 14px 0 4px; letter-spacing: 1.5px; }
.done__act { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* ------------------------------------------------------- responsive */

/* --------- 平板：统计卡 5 列 → 3 列 --------- */
@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* --------- 手机 / 窄屏：≤860px --------- */
@media (max-width: 860px) {

  /* 顶栏压成两行：第一行品牌 + 账号，第二行导航（可横滑） */
  .topbar__inner { height: auto; padding: 8px 12px; gap: 6px 8px; flex-wrap: wrap; }
  .brand__mark { width: 28px; height: 28px; border-radius: 8px; }
  .brand__logo { width: 21px; }
  .brand__text strong { font-size: 14px; letter-spacing: 0; }
  .brand__text em { display: none; }
  .topbar__right { order: 2; gap: 6px; }
  .userchip { padding: 4px 9px 4px 5px; font-size: 12px; gap: 5px; }
  .userchip span { display: none; }
  .avatar { width: 22px; height: 22px; font-size: 11px; }
  .topbar__right .btn { padding: 5px 10px; font-size: 12px; }
  .nav { order: 3; width: 100%; margin: 0; gap: 2px; padding-bottom: 2px;
         overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; padding: 6px 11px; font-size: 12.5px; border-radius: 7px; }

  /* 内容区 */
  .wrap { padding: 14px 12px calc(64px + env(safe-area-inset-bottom)); }
  .hero { padding: 18px 14px; }
  .hero h1 { font-size: 18px; }
  .hero p { font-size: 12.5px; }
  .hero__stats { gap: 15px; margin-top: 12px; }
  .hero__stats b { font-size: 17px; }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .blockpick { grid-template-columns: 1fr; }
  .g-personnel, .g-interview, .g-material { grid-template-columns: 1fr 1fr; }
  /* 手机上列宽变大，长标签基本一行就放下，取消预留的两行高度，省一行垂直空间 */
  .g-personnel .field__label { min-height: 0; }

  /* 统计卡：手机上保持 2 列（原来退化成单列，要滑 2~3 屏才见到表格） */
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
  .stat { padding: 9px 11px; }
  .stat__label { font-size: 11.5px; gap: 4px; }
  .stat__value { font-size: 20px; margin-top: 2px; }
  .stat__sub { font-size: 11px; }

  /* 页签：横向滚动，不再被截断 */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
          scrollbar-width: none; margin-bottom: 12px; padding-bottom: 1px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; }

  /* 卡片 */
  .card { padding: 14px 13px; }
  .card__hd { gap: 6px 8px; margin-bottom: 11px; }
  .card__hd h2 { font-size: 14px; }
  .card__hint { display: none; }              /* 手机上省一行，提示由 .tablehint 承担 */
  .card__act { width: 100%; }
  .card__act .btn { flex: 1; }

  /* 筛选条 */
  .barfilter { gap: 8px; }
  .barfilter .field--sm { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .barfilter__act { width: 100%; margin-left: 0; }
  .barfilter__act .btn { flex: 1; }
  .field--sm { width: 100%; }
  .filters { gap: 8px; }
  .filters__act { margin-left: 0; width: 100%; }
  .filters__act .btn { flex: 1; }

  /* 表单 / 提交条 / 弹窗 */
  .pagehd { align-items: flex-start; }
  .pagehd__act { margin-left: 0; width: 100%; }
  .pagehd__act .btn { flex: 1; }
  .itemrow__del { position: static; }
  .submitbar { flex-direction: column-reverse; align-items: stretch; }
  .submitbar .btn { width: 100%; }
  .modal { padding: 0; align-items: flex-end; }
  .modal__box { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92vh; }

  /* 表格容器：手机上跟页面一起滚，不做嵌套滚动 */
  .tablewrap { max-height: none; }
  .tablewrap--tall { max-height: none; }
  .pager { justify-content: center; }
  .pager button { padding: 7px 13px; font-size: 13px; }
  .pager__size { padding: 7px 8px; font-size: 13px; }

  /* 下拉面板：手机上按视口限高，别顶出屏幕 */
  .combo__list { max-height: min(52vh, 320px); }

  /* iOS 聚焦输入框不放大页面（字号必须 ≥16px） */
  input[type=text], input[type=tel], input[type=password], input[type=number],
  input[type=date], select, textarea, .combo__input { font-size: 16px; }
  .combo__opt { padding: 10px 9px; font-size: 13.5px; }
  .btn { padding: 10px 15px; }
  .btn--sm { padding: 8px 12px; }
}

/* --------- 窄屏手机：≤640px --------- */
@media (max-width: 640px) {

  /* 表格整体压紧，降低需要的横向空间 */
  .dt { font-size: 11.5px; }
  .dt--sm td, .dt--sm th { font-size: 11.5px; }
  .dt th, .dt td { padding: 6px 8px; }
  .dt thead th { font-size: 11px; }

  /* 首列冻结：横滑到后面时仍能对上号 */
  .dt th:first-child, .dt td:first-child {
    position: sticky; left: 0; z-index: 2;
    box-shadow: inset -1px 0 0 var(--line), 3px 0 6px -4px rgba(21,36,58,.22);
  }
  .dt thead tr:first-child th:first-child { z-index: 4; }
  /* 两层表头（数据明细）时，第二行首格只垂直吸顶，不水平冻结，
     否则横滑时会浮到左侧把第一行的「提交编号」盖住 */
  .dt thead tr:nth-child(2) th:first-child { left: auto; z-index: 3; }
  .dt tbody td:first-child { background: #fff; }
  .dt tbody tr:nth-child(even) td:first-child { background: #FAFCFB; }
  .dt tbody tr:hover td:first-child { background: var(--brand-50); }
  .dt tbody tr.is-dup td:first-child { background: #FFF6F5 !important; }
  .dt tbody tr.is-dup--weak td:first-child { background: #FFFCF4 !important; }
  .dt tbody tr.is-deleted td:first-child { background: #F4F6F8 !important; }
  .dt tbody tr.is-total td:first-child { background: var(--brand-100) !important; }

  /* 折叠次要列：统一用 nth-last-child 从尾部数，
     这样合计行的首格 colspan 不会让列索引错位。
     参会人员明细表 12 列（…身份证号 / 状态 / 重复标签 / 提交人 / 提交时间）：
       倒数 1 = 提交时间、倒数 2 = 提交人、倒数 5 = 身份证号，
     折叠后恰好少 3 列，与 app.js 的 SM_HIDDEN.vsPersonTable / buPersonTable 一致。 */
  #vsPersonTable th:nth-last-child(1), #vsPersonTable td:nth-last-child(1),
  #vsPersonTable th:nth-last-child(2), #vsPersonTable td:nth-last-child(2),
  #vsPersonTable th:nth-last-child(5), #vsPersonTable td:nth-last-child(5),
  #buPersonTable th:nth-last-child(1), #buPersonTable td:nth-last-child(1),
  #buPersonTable th:nth-last-child(2), #buPersonTable td:nth-last-child(2),
  #buPersonTable th:nth-last-child(5), #buPersonTable td:nth-last-child(5),
  #vsDemandTable th:nth-last-child(4), #vsDemandTable td:nth-last-child(4),
  #buSessionTable th:nth-last-child(4), #buSessionTable td:nth-last-child(4) {
    display: none;
  }

  .tablehint { display: flex; }
  .minecard__act { margin-left: 0; width: 100%; margin-top: 8px; }

  /* 操作列固定在右侧后要尽量窄，否则会挤掉中间可视区。
     ≤860px 段有 .btn { padding:10px 15px } / .btn--sm { padding:8px 12px }，
     这里用 ID 前缀（且本段在它之后）压过去。 */
  #dt th.cell-ops, #dt td.cell-ops { padding: 6px 6px; }
  #dt .cell-ops .btn--danger { padding: 5px 8px; font-size: 12px; }
  #dt .cell-ops .tag-del { padding: 1px 6px; font-size: 11px; }
}

/* --------- 超窄屏：≤480px --------- */
@media (max-width: 480px) {
  .g-personnel, .g-interview, .g-material { grid-template-columns: 1fr; }
  .hero__act .btn { flex: 1 1 calc(50% - 5px); }
}

/* --------- 小屏手机（iPhone SE 一代等 ≤375px）：顶栏别撑成三行 --------- */
@media (max-width: 375px) {
  .topbar__inner { padding: 7px 10px; gap: 5px 6px; }
  .brand { gap: 7px; }
  .brand__mark { width: 24px; height: 24px; border-radius: 7px; }
  .brand__logo { width: 18px; }
  .brand__text strong { font-size: 12.5px; }
  .userchip { padding: 3px 7px 3px 4px; font-size: 11.5px; }
  .avatar { width: 20px; height: 20px; font-size: 10px; }
  .topbar__right .btn { padding: 4px 8px; font-size: 11.5px; }
  .nav a { padding: 6px 9px; font-size: 12px; }
  .stat__label { font-size: 11px; }
  .stat__value { font-size: 18px; }
  .stat__sub { font-size: 10.5px; }
}

/* ------------------------------------------------------- touch */
html { -webkit-tap-highlight-color: transparent; }
.tablewrap { overscroll-behavior-x: contain; }