/* ==========================================================================
   萝岗和苑一期 · 委托管理后台（admin.css）
   在 style.css 的基础上追加：后台布局、履约看板、分享只读看板、打印样式
   ========================================================================== */

/* ---------------- 后台骨架 ---------------- */

.adm {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-height: calc(100vh - var(--nav-h));
}

.side {
  flex: none;
  width: 212px;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 14px 10px 28px;
}
.side-grp {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-4);
  padding: 14px 10px 6px;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-s);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background .16s, color .16s;
}
.side-item:hover { background: var(--brand-xl); color: var(--brand-d); }
.side-item.on { background: var(--brand); color: #fff; font-weight: 600; }
.side-item.on .svgi { opacity: 1; }
.side-item .svgi { width: 17px; height: 17px; flex: none; opacity: .75; }
.side-item .sd-n {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  background: var(--line-2);
  color: var(--ink-3);
  border-radius: 20px;
  padding: 1px 7px;
}
.side-item.on .sd-n { background: rgba(255, 255, 255, .22); color: #fff; }
.side-item .sd-n.warn { background: var(--warn-l); color: var(--warn); }
.side-item .sd-n.red { background: var(--red-l); color: var(--red); }

.main { flex: 1; min-width: 0; padding: 20px 22px 60px; }

.pg-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pg-t { font-size: 21px; }
.pg-d { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.pg-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* 工具条 */
.bar-tool {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.bar-tool .field { margin: 0; }
.bar-tool .input, .bar-tool .select { height: 34px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  transition: .15s;
}
.chip-btn:hover { border-color: var(--brand); color: var(--brand); }
.chip-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* 分页 */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px 0;
  font-size: 13px;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.pager-b { display: flex; gap: 6px; align-items: center; }

/* 状态徽标补充色 */
.badge.gray { background: var(--line-2); color: var(--ink-3); }
.badge.blue { background: var(--brand-l); color: var(--brand-d); }
.badge.orange { background: var(--warn-l); color: var(--warn); }

/* 二栏 / 三栏 */
.col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }

/* 定义列表行 */
.kv { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.kv:last-child { border-bottom: none; }
.kv-k { flex: none; width: 132px; color: var(--ink-3); }
.kv-v { flex: 1; min-width: 0; color: var(--ink); }

/* 进度条（带红线标记） */
.pb { position: relative; height: 9px; background: var(--line-2); border-radius: 20px; overflow: visible; }
.pb-in { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--brand), #58a0f0); transition: width .5s ease; }
.pb-in.ok { background: linear-gradient(90deg, #0f7a58, #3fae87); }
.pb-in.warn { background: linear-gradient(90deg, #a86400, #e0a13c); }
.pb-in.red { background: linear-gradient(90deg, #d92b2b, #f07070); }
.pb-mark {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: var(--red); border-radius: 2px;
}
.pb-mark::after {
  content: attr(data-l);
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; color: var(--red); white-space: nowrap; font-weight: 600;
}
.pb-lb { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* 环形指标 */
.ring { position: relative; width: 96px; height: 96px; flex: none; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring-txt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-v { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ring-l { font-size: 11px; color: var(--ink-3); margin-top: 1px; }

/* ---------------- 履约看板（管理端） ---------------- */

.dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.dash-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 16px; box-shadow: var(--shadow);
}
.dash-card.hl { border-color: #cfe0f7; background: linear-gradient(180deg, #fbfdff, #fff); }
.dc-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.dc-h .svgi { width: 15px; height: 15px; opacity: .7; }
.dc-v { font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-top: 7px; }
.dc-v small { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.dc-s { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.dc-v.red { color: var(--red); }
.dc-v.ok { color: var(--ok); }
.dc-v.warn { color: var(--warn); }

/* 楼栋配租网格 */
.blds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bld {
  border: 1px solid var(--line); border-radius: var(--r-s); padding: 11px 12px; background: #fff;
}
.bld-n { font-size: 13.5px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; }
.bld-n em { font-style: normal; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.bld-bar { margin-top: 8px; }
.bld-mix { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-3); margin-top: 7px; flex-wrap: wrap; }
.bld-mix i { font-style: normal; display: inline-flex; align-items: center; gap: 3px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot.g { background: var(--ok); }
.dot.b { background: var(--brand); }
.dot.y { background: #d9a13c; }
.dot.r { background: var(--red); }
.dot.gy { background: var(--ink-4); }

/* ---------------- 分享只读看板 ---------------- */

.board { max-width: 1120px; margin: 0 auto; padding: 0 20px 70px; }

.bd-note {
  display: flex; align-items: center; gap: 9px;
  background: var(--brand-l); border: 1px solid #cfe0f7; color: var(--brand-d);
  border-radius: var(--r); padding: 11px 14px; font-size: 13px; margin-bottom: 18px;
}
.bd-note .svgi { width: 16px; height: 16px; flex: none; }

.bd-hero {
  background: linear-gradient(135deg, #1b5fbe 0%, #12488f 55%, #0d3a75 100%);
  border-radius: var(--r-l);
  color: #fff;
  padding: 26px 28px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.bd-hero::after {
  content: '';
  position: absolute; right: -70px; top: -70px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.bd-hero-t { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.bd-hero-s { font-size: 13.5px; opacity: .9; margin-top: 6px; }
.bd-hero-m {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px;
  padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .18);
}
.bd-hero-m div span { display: block; font-size: 11.5px; opacity: .78; }
.bd-hero-m div b { font-size: 15.5px; font-weight: 700; }

.bd-sec { margin-top: 26px; }
.bd-sec-h {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 700; margin-bottom: 12px;
}
.bd-sec-h .svgi { width: 18px; height: 18px; color: var(--brand); }
.bd-sec-h em {
  font-style: normal; font-size: 12px; font-weight: 500;
  color: var(--ink-3); margin-left: auto;
}

.bd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.bd-kpi {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 17px 18px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 15px;
}
.bd-kpi-b { flex: 1; min-width: 0; }
.bd-kpi-l { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.bd-kpi-v { font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1.12; margin-top: 2px; }
.bd-kpi-v small { font-size: 15px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.bd-kpi-s { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.bd-kpi-v.ok { color: var(--ok); }
.bd-kpi-v.red { color: var(--red); }
.bd-kpi-v.warn { color: var(--warn); }

.bd-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 17px 19px; box-shadow: var(--shadow);
}
.bd-panel + .bd-panel { margin-top: 13px; }
.bd-panel-h {
  font-size: 14px; font-weight: 700; margin-bottom: 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.bd-panel-h em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* 堆叠条：房源状态分布 */
.stack { display: flex; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.stack i { display: block; height: 100%; transition: width .5s; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 11px; font-size: 12.5px; color: var(--ink-2); }
.legend b { font-weight: 700; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

/* 报送日历 */
.cal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cal-i {
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--r-s); padding: 10px 12px; background: #fcfdff;
}
.cal-i.urgent { border-left-color: var(--red); background: var(--red-l); }
.cal-i.soon { border-left-color: #d9a13c; background: #fffcf5; }
.cal-t { font-size: 13.5px; font-weight: 600; }
.cal-d { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.cal-e { font-size: 11.5px; color: var(--red); font-weight: 600; margin-top: 3px; }

/* 考核项 */
.as-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.as-row:last-child { border-bottom: none; }
.as-no {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--brand-l); color: var(--brand-d);
  font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.as-n { flex: 1; min-width: 0; }
.as-tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; flex: none; }
.as-tag.fatal { background: var(--red-l); color: var(--red); }
.as-tag.high { background: var(--warn-l); color: var(--warn); }
.as-tag.norm { background: var(--line-2); color: var(--ink-3); }
.as-p { flex: none; font-size: 12.5px; color: var(--ink-3); width: 74px; text-align: right; }

/* 免责 / 页脚 */
.bd-foot {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3); display: flex;
  justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

/* 颜色标记块（分享页数据来源说明） */
.src-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-3);
  background: var(--line-2); border-radius: 20px; padding: 2px 9px;
}

/* ---------------- 弹层 ---------------- */
.mask {
  position: fixed; inset: 0; background: rgba(12, 20, 33, .45);
  backdrop-filter: blur(2px); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mask-box {
  background: #fff; border-radius: var(--r-l); width: 100%; max-width: 620px;
  max-height: 88vh; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(12, 20, 33, .3);
}
.mask-h {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mask-h b { font-size: 16px; }
.mask-b { padding: 18px 20px; overflow-y: auto; }
.mask-f {
  padding: 13px 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 9px; background: #fafcff;
}

/* ---------------- 空态 / 加载 ---------------- */
.loading { padding: 46px 0; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.spin {
  width: 26px; height: 26px; margin: 0 auto 11px;
  border: 3px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: sp .8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* ---------------- 数据统计 ---------------- */

.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }

/* 按提交日期趋势 */
.trend { display: flex; align-items: flex-end; gap: 8px; height: 132px; padding-top: 8px; overflow-x: auto; }
.trend-col { flex: 1; min-width: 34px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trend-bar {
  width: 100%; max-width: 46px; border-radius: 6px 6px 2px 2px; min-height: 3px;
  background: linear-gradient(180deg, #4e93ea, var(--brand));
  transition: height .5s ease; position: relative;
}
.trend-v { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.trend-x { font-size: 11px; color: var(--ink-4); white-space: nowrap; }

/* 房源占用对比条（红=已占用，绿=剩余） */
.occ-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.occ-l { width: 118px; flex: none; font-size: 12.5px; color: var(--ink-2); }
.occ-bar { flex: 1; height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; }
.occ-bar i { display: block; height: 100%; border-radius: 6px; transition: width .5s ease; }
.occ-v { width: 78px; flex: none; text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------- 顶栏用户区 ---------------- */

.user-chip {
  display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px;
  border: 1px solid var(--line); border-radius: 30px; background: #fff;
  cursor: pointer; transition: border-color .18s, box-shadow .18s; position: relative;
}
.user-chip:hover { border-color: #c7d5e8; box-shadow: 0 2px 10px rgba(20, 25, 34, .07); }
.user-av {
  width: 27px; height: 27px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, #4e93ea, var(--brand)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0;
}
.user-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.user-n { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.user-p { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; z-index: 95;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-h); padding: 6px; display: none;
}
.user-menu.on { display: block; }
.user-menu-i {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; background: transparent; border-radius: var(--r-s);
  font-size: 13.5px; color: var(--ink-2);
}
.user-menu-i:hover { background: var(--brand-xl); color: var(--brand-d); }
.user-menu-i.danger:hover { background: var(--red-l); color: var(--red); }
.user-menu-hd {
  padding: 9px 11px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 5px;
}
.user-menu-hd b { display: block; font-size: 13.5px; }
.user-menu-hd span { font-size: 11.5px; color: var(--ink-3); }

/* ---------------- 无权限占位 ---------------- */

.noperm { padding: 52px 20px; text-align: center; }
.noperm-ico {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--warn-l); color: var(--warn);
  display: flex; align-items: center; justify-content: center;
}
.noperm-ico svg { width: 26px; height: 26px; }
.noperm-t { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.noperm-d { font-size: 13.5px; color: var(--ink-3); line-height: 1.75; max-width: 460px; margin: 0 auto; }

/* ---------------- 弹层（宽版 / 标签页） ---------------- */

.mask-box.wide { max-width: 1040px; }
.mask-box.mid { max-width: 780px; }

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin: -4px 0 16px; overflow-x: auto; }
.tab {
  border: 0; background: transparent; padding: 9px 14px; font-size: 13.5px; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 600;
}
.tab:hover { color: var(--brand-d); }
.tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.tab .cnt {
  font-size: 11px; font-weight: 700; margin-left: 5px; padding: 0 5px;
  border-radius: 9px; background: #eef2f7; color: var(--ink-2);
}
.tab.on .cnt { background: var(--brand-l); color: var(--brand-d); }
.tab-pane { display: none; }
.tab-pane.on { display: block; }

.sec-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 11px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2);
}
.sec-h b { font-size: 14px; }
.sec-h em { font-style: normal; font-size: 12px; color: var(--ink-3); font-weight: 400; }
.sub-note {
  font-size: 12.5px; color: var(--ink-3); line-height: 1.7; margin: -3px 0 13px;
  background: var(--brand-xl); border: 1px solid var(--line-2); border-radius: var(--r-s);
  padding: 9px 12px;
}

/* ---------------- 表单栅格 ---------------- */

.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.fgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid .span2 { grid-column: span 2; }
.fgrid .span3 { grid-column: span 3; }
.fgrid .field > label { font-size: 12.5px; }

/* ---------------- 同住人员编辑卡片 ---------------- */

.occ-list { display: flex; flex-direction: column; gap: 11px; }
.occ-card {
  border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px 12px;
  background: #fcfdff; position: relative;
}
.occ-card-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px;
}
.occ-card-h b { font-size: 13.5px; }
.occ-no {
  width: 22px; height: 22px; border-radius: 50%; background: var(--brand-l); color: var(--brand-d);
  font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center;
  justify-content: center; margin-right: 7px;
}
.occ-mat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.occ-mat-l { font-size: 12.5px; color: var(--ink-2); font-weight: 600; width: 100%; }

/* ---------------- 材料上传 ---------------- */

.mat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.mat-box {
  border: 1px dashed #cfd9e6; border-radius: var(--r); padding: 12px 13px;
  background: #fcfdff; display: flex; flex-direction: column; gap: 8px;
}
.mat-box.done { border-style: solid; border-color: #cfe9df; background: #f7fcfa; }
.mat-box.miss { border-color: #f0d4d4; background: #fffafa; }
.mat-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mat-h b { font-size: 13px; }
.mat-h .req { color: var(--red); font-size: 11.5px; font-weight: 600; }
.mat-h .opt { color: var(--ink-4); font-size: 11.5px; }
.mat-d { font-size: 11.5px; color: var(--ink-4); line-height: 1.55; }
.mat-files { display: flex; flex-direction: column; gap: 6px; }
.mat-file {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 12.5px;
}
.mat-file a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--brand-d); }
.mat-file .sz { color: var(--ink-4); font-size: 11.5px; flex: none; }
.mat-file .del {
  border: 0; background: transparent; color: var(--ink-4); font-size: 15px; line-height: 1;
  padding: 2px 4px; border-radius: 5px; flex: none;
}
.mat-file .del:hover { background: var(--red-l); color: var(--red); }
.mat-up {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--brand-d); background: var(--brand-l); border: 0; border-radius: var(--r-s);
  padding: 7px 12px; width: fit-content;
}
.mat-up:hover { background: #dbe9fb; }
.mat-up:disabled { opacity: .6; cursor: not-allowed; }
.mat-up input[type=file] { display: none; }

.drop-zone {
  border: 1.5px dashed #cfd9e6; border-radius: var(--r); padding: 22px 16px;
  text-align: center; background: #fcfdff; transition: .18s;
}
.drop-zone.hot { border-color: var(--brand); background: var(--brand-xl); }
.drop-zone .dz-t { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.drop-zone .dz-d { font-size: 12px; color: var(--ink-4); }

/* ---------------- 权限矩阵 ---------------- */

.perm-mod { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 11px; overflow: hidden; }
.perm-mod-h {
  padding: 10px 14px; background: #fafcff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.perm-mod-h b { font-size: 13.5px; }
.perm-mod-h span { font-size: 12px; color: var(--ink-3); }
.perm-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.perm-i {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 14px;
  border-bottom: 1px solid var(--line-2); cursor: pointer; font-size: 13px;
}
.perm-i:nth-child(odd) { border-right: 1px solid var(--line-2); }
.perm-i:hover { background: var(--brand-xl); }
.perm-i input { width: 15px; height: 15px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.perm-i .pn { font-weight: 600; }
.perm-i .pk { font-size: 11px; color: var(--ink-4); font-family: ui-monospace, Consolas, monospace; }
.perm-i .pr { font-size: 10.5px; font-weight: 700; color: var(--red); background: var(--red-l);
  padding: 1px 5px; border-radius: 4px; margin-left: 5px; }
.perm-i input:disabled + .pi-t { opacity: .55; }

.role-card {
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff;
}
.role-card.on { border-color: var(--brand); background: var(--brand-xl); }
.role-card b { font-size: 13.5px; display: block; }
.role-card .rd { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin-top: 3px; }
.role-card .rc {
  font-size: 12px; color: var(--brand-d); background: var(--brand-l); font-weight: 700;
  padding: 3px 9px; border-radius: 20px; flex: none;
}

/* ---------------- 密码展示 ---------------- */

.pwd-show {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--warn-l); border: 1px solid #f0dcb8; border-radius: var(--r); margin: 12px 0;
}
.pwd-show code {
  flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: 15px; font-weight: 700;
  color: var(--warn); letter-spacing: .5px; word-break: break-all;
}

/* ---------------- 时间线（合同轨迹） ---------------- */

.tl { position: relative; padding-left: 20px; }
.tl::before { content: ''; position: absolute; left: 5px; top: 5px; bottom: 5px; width: 1px; background: var(--line); }
.tl-i { position: relative; padding-bottom: 13px; }
.tl-i::before {
  content: ''; position: absolute; left: -19px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: #fff; border: 2px solid var(--line);
}
.tl-i:first-child::before { border-color: var(--brand); background: var(--brand); }
.tl-t { font-size: 13px; line-height: 1.6; }
.tl-d { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }

/* ---------------- 响应式 ---------------- */

@media (max-width: 1080px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: 1fr; }
  .blds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .bd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .adm { display: block; }
  .side {
    position: static; width: auto; height: auto;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    display: flex; gap: 6px; overflow-x: auto; white-space: nowrap;
  }
  .side-grp { display: none; }
  .side-item { width: auto; padding: 7px 12px; font-size: 13px; }
  .side-item .sd-n { display: none; }
  .main { padding: 14px 14px 50px; }
  .board { padding: 0 14px 50px; }
  .cards-2, .col-3 { grid-template-columns: 1fr; }
  .blds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .dash-grid, .bd-kpis, .cal, .blds { grid-template-columns: 1fr; }
  .bd-hero { padding: 20px; }
  .bd-hero-t { font-size: 19px; }
  .bd-kpi { padding: 14px; }
  .bd-kpi-v { font-size: 25px; }
  .kv-k { width: 104px; }
  .pg-t { font-size: 18px; }
  .mask-b { padding: 14px; }
}

/* ---------------- 新增组件的小屏适配 ---------------- */

@media (max-width: 1080px) {
  .fgrid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgrid .span3 { grid-column: span 2; }
  .perm-items { grid-template-columns: 1fr; }
  .perm-i:nth-child(odd) { border-right: 0; }
}

@media (max-width: 820px) {
  .mask-box.wide, .mask-box.mid { max-width: none; }
  .fgrid, .fgrid.c3 { grid-template-columns: 1fr; }
  .fgrid .span2, .fgrid .span3 { grid-column: span 1; }
  .mat-grid { grid-template-columns: 1fr; }
  .user-txt { display: none; }
  .user-chip { padding: 5px 6px; }
}

@media (max-width: 560px) {
  .tabs { margin-bottom: 13px; }
  .tab { padding: 8px 11px; font-size: 13px; }
  .occ-card { padding: 12px; }
  .perm-i { padding: 9px 12px; }
}

/* ---------------- 打印（分享看板导出 PDF） ---------------- */
@media print {
  :root { --bg: #fff; }
  .topbar, .side, .no-print, .bd-note { display: none !important; }
  .adm { display: block; }
  .main, .board { padding: 0; max-width: none; }
  .bd-hero {
    background: #12488f !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .bd-kpi, .bd-panel, .dash-card { break-inside: avoid; box-shadow: none; }
  .stack i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 12mm; }
}

/* ===== #40 人工资格核验（信息汇聚 + 逐项勾验） ===== */
.elig-dot{color:#e11d48;font-size:10px;margin-left:3px;animation:eligpulse 1.6s infinite}
@keyframes eligpulse{0%,100%{opacity:1}50%{opacity:.3}}
.elig-head{background:#eff6ff;border-color:#bfdbfe;color:#1e3a5f;margin:4px 0 12px;align-items:flex-start}
.elig-head .svgi{color:var(--brand,#1b5fbe);margin-top:2px}
.elig-commit{border:1px solid;border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.7;margin:0 0 10px}
.elig-commit.ok{background:#f0fdf4;border-color:#bbf7d0;color:#14532d}
.elig-commit.miss{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.elig-commit-text{margin-top:6px;color:#374151;background:#fff;border:1px dashed #c7d2e0;border-radius:6px;padding:8px 10px}
.elig-saved{border-radius:8px;padding:9px 12px;font-size:13px;margin:0 0 12px;background:#f8fafc;border:1px solid #e2e8f0;color:#334155}
.elig-group{border:1px solid #e6ebf2;border-radius:10px;margin:0 0 14px;overflow:hidden}
.elig-gname{background:#f4f8ff;color:var(--brand,#1b5fbe);font-weight:700;font-size:13px;padding:9px 12px;border-bottom:1px solid #e6ebf2}
.elig-item{padding:11px 12px;border-top:1px solid #eef2f7;background:#fff}
.elig-item:first-child{border-top:none}
.elig-title{font-weight:600;font-size:13.5px;color:#1f2937;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.elig-title .req{color:#e11d48}
.elig-lvtag{font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;line-height:1.7}
.elig-auto{font-size:12.5px;line-height:1.7;margin:7px 0 4px;padding:8px 10px;border-radius:7px;border:1px solid}
.elig-lv-hit{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.elig-lv-clear{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.elig-lv-manual{background:#f8fafc;border-color:#e2e8f0;color:#475569}
.elig-lv-na{background:#f3f4f6;border-color:#e5e7eb;color:#6b7280}
.elig-lvtag.elig-lv-hit{background:#fee2e2;color:#b91c1c}
.elig-lvtag.elig-lv-clear{background:#dcfce7;color:#15803d}
.elig-lvtag.elig-lv-manual{background:#e5e7eb;color:#475569}
.elig-lvtag.elig-lv-na{background:#e5e7eb;color:#6b7280}
.elig-hits{list-style:none;margin:7px 0 2px;padding:0}
.elig-hits li{background:#fff;border:1px solid #fecaca;border-radius:6px;padding:7px 9px;font-size:12.5px;color:#991b1b;margin-bottom:6px;line-height:1.6}
.elig-src{display:inline-block;min-width:56px;text-align:center;background:#b91c1c;color:#fff;border-radius:4px;padding:0 6px;margin-right:6px;font-size:11px}
.elig-mat{font-size:12.5px;margin:6px 0;padding:6px 10px;border-radius:6px}
.elig-mat.ok{background:#f0fdf4;color:#166534}
.elig-mat.miss{background:#fef2f2;color:#b91c1c}
.elig-opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.elig-opt{display:inline-flex;align-items:center;gap:5px;border:1px solid #d5dce6;border-radius:999px;padding:5px 13px;font-size:12.5px;cursor:pointer;background:#fff;color:#374151;user-select:none}
.elig-opt:hover{border-color:var(--brand,#1b5fbe)}
.elig-opt:has(input:checked){border-color:var(--brand,#1b5fbe);background:#eff6ff;color:var(--brand,#1b5fbe);font-weight:600}
.elig-opt-hit:has(input:checked){border-color:#e11d48;background:#fef2f2;color:#e11d48}
.elig-opt-na:has(input:checked){border-color:#94a3b8;background:#f1f5f9;color:#475569}
.elig-opt input{margin:0;accent-color:var(--brand,#1b5fbe)}
.elig-opt-hit input{accent-color:#e11d48}
.elig-note-wrap{margin-top:8px}
.elig-note{width:100%;font-size:13px;box-sizing:border-box}
.elig-note-ro{margin-top:7px;font-size:12.5px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:6px;padding:7px 9px;line-height:1.6}
.elig-need{outline:2px solid #e11d48;outline-offset:-2px;border-radius:8px;animation:eligshake .3s}
@keyframes eligshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.elig-foot-tip{font-size:12px;color:#6b7280;padding:4px 2px 8px}
.elig-bar-miss{background:#fef2f2 !important;border-color:#fecaca !important;color:#991b1b !important}