/* 立胜检测信息服务系统 — 现代 PC 后台样式（替代原 Smobiler 移动端界面） */
:root {
  --brand: #1b5fbd;
  --brand-dark: #144a97;
  --brand-light: #e8f0fb;
  --ink: #1c2430;
  --ink-2: #5a6675;
  --ink-3: #8a95a3;
  --line: #e3e8ef;
  --bg: #f4f6f9;
  --card: #ffffff;
  --ok: #1f9254;
  --warn: #b7791f;
  --err: #d13c3c;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.6 "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
button { font-family: inherit; }

/* ---------- 通用控件 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border: 1px solid transparent; border-radius: 8px;
  background: var(--brand); color: #fff; cursor: pointer; font-size: 14px;
  transition: background .15s, box-shadow .15s, opacity .15s;
}
.btn:hover { background: var(--brand-dark); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.btn.danger { background: var(--err); }
.btn.danger:hover { background: #a92f2f; }
.btn.sm { padding: 5px 11px; font-size: 13px; }
.btn.block { width: 100%; }

.input, select.input, textarea.input {
  width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27, 95, 189, .12); }
.input[readonly], .input[disabled] { background: #f3f5f8; color: var(--ink-2); }
.input[disabled] { cursor: not-allowed; }
textarea.input { resize: vertical; min-height: 72px; }
/* 用户设置的收样地址：2 行文字高度（2 行 42px + 上下内边距 16px + 边框 2px） */
textarea#pAddress { min-height: 60px; }

.field { margin-bottom: 14px; }
.field > label { display: block; margin-bottom: 5px; color: var(--ink-2); font-size: 13px; }
.field .hint { color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.field.required > label::after { content: " *"; color: var(--err); }
/* 必填星号（表头、面板标题这类不是 label 的地方用） */
.req { color: var(--err); margin-left: 2px; font-style: normal; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card > .card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.card > .card-head h3 { font-size: 16px; }
.card > .card-body { padding: 18px; }
.card + .card { margin-top: 16px; }
/* 网格里由 gap 控制间距；.card + .card 的 margin-top 会让第一个卡片比同行高出一个 margin */
.grid > .card { margin-top: 0; }
/* 工作台卡片：左侧沿用旧版图标 */
.home-card { display: flex; align-items: center; gap: 16px; padding: 18px; color: inherit; }
/* 工作台模块卡片：桌面三列，中等宽度两列，手机单列（≤900 的通用规则会先收成单列） */
@media (min-width: 641px) and (max-width: 900px) { .grid.c3.home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-card .card-ico { width: 56px; height: 56px; flex: 0 0 auto; object-fit: contain; }
/* 照明设施：蓝细线灯体，轮廓泛金光 */
.home-card .card-ico.glow-gold {
  filter: drop-shadow(0 0 1px rgba(255, 179, 0, .95)) drop-shadow(0 0 3.5px rgba(255, 160, 0, .55));
}
.home-card .card-txt { min-width: 0; }
/* 有下级菜单的模块卡片：用 button 承载点击，外观与普通卡片一致，右侧给下级留个提示 */
.home-card-btn { width: 100%; font: inherit; text-align: left; cursor: pointer; appearance: none; }
.home-card-btn:hover { box-shadow: 0 2px 6px rgba(16, 24, 40, .1), 0 8px 22px rgba(16, 24, 40, .12); }
.home-card-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.home-card .sub-hint { margin-left: auto; flex: 0 0 auto; align-self: center; color: #9aa7b8; font-size: 22px; line-height: 1; }
/* 下级卡片弹窗内单列排布 */
.sub-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sub-grid a.home-card:hover { box-shadow: 0 2px 6px rgba(16, 24, 40, .1), 0 8px 22px rgba(16, 24, 40, .12); }
.sub-grid a.home-card:focus-visible, .home-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 新建委托的委托头：四等分栅格，宽字段跨两格（半宽），窄字段各占一格（四分之一） */
.grid.c-head { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.c-head > .c-span2 { grid-column: span 2; }
.grid.c-head > .c-span4 { grid-column: span 4; }

/* 新建委托按旧版分块：工程信息 / 样品·项目信息 + 右侧检测参数 */
.sec + .sec, .sec + .sec-split { margin-top: 16px; }
.sec-t { font-size: 13px; font-weight: 600; color: var(--ink-2); padding-bottom: 7px;
  border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.sec-t .p-cnt { font-weight: 400; color: var(--brand); margin-left: 6px; }
.sec-split { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 16px; align-items: start; }
/* 样品级联四个下拉：样品名称和检测依据的文字长，多分一点宽度 */
/* 样品/项目信息四列：检测类别 / 样品类别（比原来宽 2 个字符）/ 样品名称 固定，检测依据吃掉弹框加宽的 80px */
.grid.c-sample { grid-template-columns: 204px 244px 210px minmax(0, 1fr); }
.param-box { max-height: 322px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 5px; }
.param-box .p-none { color: var(--ink-3); font-size: 12.5px; padding: 10px 8px; margin: 0; }
.pitem { display: flex; align-items: baseline; gap: 7px; padding: 5px 6px; border-radius: 6px;
  font-size: 13px; cursor: pointer; }
.pitem:hover { background: var(--bg); }
.pitem input { margin: 0; flex: 0 0 auto; align-self: center; }
.pitem .pn { flex: 1 1 auto; min-width: 0; word-break: break-all; }
/* 新建收样预约的字段行：三列 27.5% / 27.5% / 45%（fr 分的是扣掉列间距后的空间，比例严格一致） */
.grid.c-appt { grid-template-columns: minmax(0, 27.5fr) minmax(0, 27.5fr) minmax(0, 45fr); }
/* 委托头标题与输入框同行：标题右对齐占固定宽，输入框随之变窄 */
.grid.c-head .field { display: flex; align-items: center; gap: 8px; }
.grid.c-head .field > label { flex: 0 0 5em; width: 5em; margin: 0; text-align: right; }
.grid.c-head .field > .input { flex: 1 1 auto; min-width: 0; }
/* 「备案证号/批号」这类长标签别折行 */
.grid.c-head .field.lab-wide > label, .modal .grid.c-head .field.lab-wide > label { flex: 0 0 7em; width: 7em; }
/* 委托备注固定一行文字高（border-box：1 行 × 1.5 行高 + 上下内边距 16px + 边框 2px） */
.grid.c-head textarea.input { min-height: 0; line-height: 1.5; height: calc(1.5em + 18px); resize: none; }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid.c2, .grid.c3, .grid.c4, .grid.c-head, .grid.c-appt { grid-template-columns: 1fr; } }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th, table.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.tbl th { background: #f7f9fc; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
table.tbl tbody tr:hover { background: #f9fbfe; }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 40px 10px; text-align: center; color: var(--ink-3); }
/* 预约列表空状态：字号比通用 .empty 大 2 号，「新建预约」可直接点击 */
.empty-lg { font-size: 16px; }
.empty-lg a { color: var(--brand); font-weight: 600; text-decoration: none; }
.empty-lg a:hover { text-decoration: underline; }
/* 「＋ 新建预约」按钮：按内容自然宽 93px 加 30% */
#btnNew { min-width: 121px; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--brand-light); color: var(--brand-dark); }
.tag.ok { background: #e4f6ec; color: var(--ok); }
.tag.warn { background: #fdf3e0; color: var(--warn); }
.tag.gray { background: #eef1f5; color: var(--ink-2); }
.tag.err { background: #fdeceb; color: #c0392b; }
.tag.done { background: #f0ecfd; color: #6b3fd4; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
/* 工具栏里「标签 + 控件」排成一行（照明各页的年度、行政区等下拉） */
.toolbar label { display: inline-flex; align-items: center; gap: 8px; }
.toolbar label > .input { width: auto; min-width: 130px; }
.toolbar .spacer { flex: 1; }
.muted { color: var(--ink-2); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }

/* ---------- 登录页 ---------- */
/* 卡片顶部固定：切换页签时只向下延伸，不再上下跳动 */
.auth-wrap { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; padding: calc(7vh + 50px) 24px 24px;
  background: linear-gradient(135deg, #12406e 0%, #1b5fbd 55%, #2f7fd8 100%); }
/* grid 隐式列会按内容撑到 520px，必须显式限制列宽，否则窄屏下 max-width:100% 失效、卡片被裁切 */
.auth-card { width: min(520px, 100%); max-width: 100%; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(6, 24, 51, .35); }
.auth-main { padding: 30px 36px 34px; }
/* 白底区表头 */
.auth-head { margin-bottom: 18px; }
.auth-head .auth-title { display: block; font-size: 22px; font-weight: 700; letter-spacing: 1px; color: var(--ink); }
.auth-head .auth-sub { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tabs button { padding: 9px 14px; border: 0; background: none; cursor: pointer; color: var(--ink-2);
  border-bottom: 2px solid transparent; font-size: 14.5px; }
.tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.auth-foot { margin-top: 18px; color: var(--ink-3); font-size: 12.5px; text-align: center; }
/* 检测报告查验面板：内容贴底，与「用户登录」面板等高（--login-h 由 login.html 量出来），
   切换选项卡时卡片高度不跳，「报告查验」按钮与「登录」按钮同高 */
#tab-verify:not([hidden]) { display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--login-h, 0px); }
/* 两个输入框连同标题上移 50px（面板贴底对齐，按钮位置不动，空档留在输入框与按钮之间） */
#tab-verify .grid.c2 { margin-bottom: 50px; }
/* 查验结果区：有内容时才留间距，空的时候不占位（占位由上面那行 auth-foot 负责） */
#verifyResult:not(:empty) { margin-top: 18px; }
@media (max-width: 620px) {
  /* 手机：收紧外边距与内边距，卡片尽量完整进入首屏，长电话可换行 */
  .auth-wrap { padding: 18px 12px 18px; }
  .auth-main { padding: 22px 18px 26px; }
  .auth-head { margin-bottom: 14px; }
  .auth-head .auth-title { font-size: 19px; letter-spacing: .5px; }
  .tabs { flex-wrap: wrap; margin-bottom: 18px; }
  .tabs button { padding: 9px 10px; font-size: 14px; }
  .auth-foot { margin-top: 14px; line-height: 1.7; overflow-wrap: break-word; }
  #tab-verify .grid.c2 { margin-bottom: 24px; }
}

/* ---------- 应用外壳 ---------- */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.side { background: #14283f; color: #c8d6e6; display: flex; flex-direction: column;
  /* 右侧内容上下滚动时侧栏固定不动；导航项过多时侧栏自身可滚 */
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .brand { padding: 18px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.side .brand b { color: #fff; font-size: 16px; letter-spacing: .5px; }
.side .brand div { color: #7f93aa; font-size: 12px; margin-top: 3px; }
.nav { padding: 10px 8px; flex: 1; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  color: #c8d6e6; font-size: 15px; margin-bottom: 2px; }
.nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* 上面 .nav a 的 display:flex 会盖掉 hidden 属性的默认隐藏，这里补回来 */
.nav a[hidden] { display: none; }
.nav a.on { background: var(--brand); color: #fff; font-weight: 600; }
.nav .ico { width: 18px; text-align: center; }
.nav .ico-img { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }

/* 二级菜单：分组标题可点折叠，默认折叠 */
.nav-group { margin: 2px 0; }
.nav-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  background: none; border: 0; border-radius: 8px; color: #dfe7f1; font: inherit; font-size: 15px;
  text-align: left; cursor: pointer; }
.nav-head:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-head .caret { margin-left: auto; font-size: 10px; transition: transform .15s ease; opacity: .7; }
.nav-group.open .nav-head .caret { transform: rotate(90deg); }
.nav-group.collapsed .nav-sub { display: none; }
.nav a.sub { padding: 8px 12px 8px 30px; font-size: 14.5px; position: relative; }
.nav a.sub::before { content: ""; position: absolute; left: 17px; top: 50%; width: 4px; height: 4px;
  border-radius: 50%; background: currentColor; opacity: .45; transform: translateY(-50%); }
.nav a.sub.on::before { opacity: 1; }
/* 缩进：以工作台为基准，一级缩进一个图标宽、二级缩进三个图标宽，逐级递进 */
.nav { --nav-ico: 18px; }
.nav > a:not(.sub), .nav-head { padding-left: calc(12px + var(--nav-ico)); }
.nav > a.nav-home { padding-left: 12px; }
.nav a.sub { padding-left: calc(12px + var(--nav-ico) * 3); }
.nav a.sub::before { left: calc(12px + var(--nav-ico) * 3 - 13px); }
/* 二级再深一级后，「取样规则查询」这类六字项在侧栏出现滚动条时会挤到折行，收紧字号与图标位 */
.nav a.sub { font-size: 14px; gap: 8px; }
.nav a.sub .ico { width: 14px; }
.side .foot { padding: 12px 16px; color: #6d8299; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 56px; background: #fff; border-bottom: 1px solid var(--line); display: flex;
  align-items: center; gap: 14px; padding: 0 20px; position: sticky; top: 0; z-index: 20; }
.topbar h2 { font-size: 16px; }
/* 标题后的补充说明：小一号、颜色更浅 */
.topbar h2 small.sub-note { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); }
/* 用户名 / 项目名称 / 区域 之间的分隔点：左右各 1 字，合计 2 字宽间距 */
.sep { margin: 0 1em; opacity: .6; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 13px; cursor: pointer; }
.avatar:hover { box-shadow: 0 0 0 3px rgba(0, 0, 0, .18); }
/* 按 UserRole 区分账户类型：power user 深绿，管理员深红 */
.avatar.power { background: #155724; }
.avatar.admin { background: #842029; }
.content { padding: 20px; flex: 1; min-width: 0; }

/* 窄屏：侧栏改为侧滑抽屉，顶栏出现三道横杠按钮 */
.nav-toggle { display: none; width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.nav-toggle:hover { border-color: var(--brand); }
.nav-toggle span { display: block; width: 16px; height: 2px; margin: 3px auto; border-radius: 2px;
  background: var(--ink-2); transition: transform .16s ease, opacity .16s ease; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.nav-mask { position: fixed; inset: 0; background: rgba(13, 27, 46, .42); z-index: 15; }
.nav-mask[hidden] { display: none; }
/* 抽屉展开时会盖住顶栏的汉堡按钮，抽屉内再给一个关闭按钮 */
.side-close { display: none; position: absolute; top: 14px; right: 12px; width: 30px; height: 30px;
  border: 0; border-radius: 8px; background: rgba(255, 255, 255, .1); color: #c8d6e6;
  font-size: 20px; line-height: 1; cursor: pointer; }
.side-close:hover { background: rgba(255, 255, 255, .22); color: #fff; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .side-close { display: block; }
  .side { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: 240px; max-width: 82vw;
    height: 100vh; z-index: 50; transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, .28); }
  body.nav-open .side { transform: none; }
}

.notice { padding: 10px 14px; border-radius: 8px; background: #fff8e6; color: #7a5a12;
  border: 1px solid #f2e2b8; margin-bottom: 16px; font-size: 13px; }
.notice.info { background: var(--brand-light); color: var(--brand-dark); border-color: #cfe0f7; }
/* 工作台公告条：文字在左，管理员的「内容设置」按钮靠右 */
.notice-bar { display: flex; align-items: center; gap: 12px; }
.notice-bar > .btn { margin-left: auto; flex: 0 0 auto; }

/* ---------- 日历 ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .dow { text-align: center; color: var(--ink-3); font-size: 12px; padding-bottom: 2px; }
.cal .day { border: 1px solid var(--line); border-radius: 8px; padding: 7px 6px; text-align: center; font-size: 15px;
  cursor: pointer; background: #fff; user-select: none; }
.cal .day:hover { border-color: var(--brand); }
.cal .day.off { background: #f4f6f9; color: var(--ink-3); cursor: not-allowed; }
.cal .day.sel { background: var(--brand); color: #fff; border-color: var(--brand); }
.cal .day.past { opacity: .45; cursor: not-allowed; }
/* 今天：描一圈品牌蓝，即使该日已过/不收样也保持可见 */
.cal .day.today { border-color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); opacity: 1; }
/* 可预约的日期用品牌蓝，和灰色不可约的区分开；已过日期保持原来的淡化灰 */
.cal .day:not(.off):not(.past) { color: var(--brand); }
.cal .day.today:not(.off):not(.past) { color: var(--brand); font-weight: 700; }
/* 选中态要压过上面两条 :not() 链的蓝字规则，否则蓝底蓝字看不见日期 */
.cal .day.sel, .cal .day.sel:not(.off):not(.past), .cal .day.sel.today:not(.off):not(.past) {
  background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.cal .day small { display: block; font-size: 12px; opacity: .8; }
/* 新建收样预约：左侧「表单 + 可收样日历」，右侧「待收样品」，左右两栏 */
.appt-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 26px; align-items: stretch; }
/* 右栏撑满整行高度，样品列表外框的底边与左栏「其它事项」输入框底边对齐 */
.appt-right { display: flex; flex-direction: column; min-height: 0; }
.appt-right .rows-wrap { flex: 1 1 auto; }
/* 表格外框撑满右栏，表头 + 15 行样品共 16 行，行高平分整个框
   （--rowh 由脚本按框高/16 写入：百分比行高在 sticky 表头上不生效） */
.appt-right .rows-wrap table { height: 100%; }
.appt-right .rows tr { height: var(--rowh, auto); }
.appt-right .rows-wrap tbody td { padding: 3px 6px; }
/* 左栏同样撑满，富余高度全给最后一行的「其它事项」，两边底边才会精确齐平 */
.appt-left { display: flex; flex-direction: column; }
.appt-left .grid.c-appt { flex: 1 1 auto; grid-template-rows: auto auto minmax(52px, 1fr); }
.appt-left .grid.c-appt > .field:last-child { display: grid; grid-template-rows: auto 1fr; }
.appt-left .grid.c-appt > .field:last-child textarea { height: 100%; resize: none; }
/* 预约详情：点「查看」后在列表下方内嵌展开，不再弹窗 */
/* 展开的详情面板：整圈用蓝色细线勾勒（不再用左侧粗蓝条） */
.appt-detail { margin-top: 14px; border: 1px solid var(--brand);
  border-radius: 8px; background: #fafbfd; padding: 12px 16px; }
.appt-detail .d-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
/* 详情面板头部：按钮都靠右成组排列（第一个把左边撑开，其余紧挨着） */
.appt-detail .d-head > button { margin-left: 8px; }
.appt-detail .d-head > button:first-of-type { margin-left: auto; }
.appt-detail .d-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; }
/* 第二列整体右移 50px（窄屏单列时不适用） */
@media (min-width: 901px) { .appt-detail .d-kv > .kv:nth-child(3n+2) { margin-left: 50px; } }
.appt-detail .d-kv.one { grid-template-columns: 1fr; margin-top: 8px; }
.appt-detail .kv { display: flex; gap: 6px; font-size: 13px; min-width: 0; }
.appt-detail .kv > span { color: var(--ink-3); flex: 0 0 6em; text-align: right; }
.appt-detail .kv > span::after { content: '：'; }
.appt-detail .kv > b { font-weight: 500; min-width: 0; word-break: break-all; }
.appt-detail .d-lines { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; }
.appt-detail .d-lines > b { margin-right: 10px; }
.appt-detail .d-lines > i { font-style: normal; display: inline-block; margin: 2px 14px 0 0; }
/* 委托单详情用四列排布（第二列同样右移 50px 对齐） */
.appt-detail.four .d-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 901px) {
  .appt-detail.four .d-kv > .kv:nth-child(3n+2) { margin-left: 0; }
  .appt-detail.four .d-kv > .kv:nth-child(4n+2) { margin-left: 50px; }
}
/* 委托单详情里的样品明细表 */
.appt-detail .d-tbl { margin-top: 8px; overflow-x: auto; }
.appt-detail .d-tbl .tbl th, .appt-detail .d-tbl .tbl td { font-size: 12.5px; padding: 6px 9px; }
/* 申请单详情的字段标题：统一宽度、右对齐、不折行（最长的「备案证号/批号」也放得下） */
.appt-detail.four .d-kv .kv > span { flex: 0 0 7.5em; white-space: nowrap; }
/* 工程部位、备注给三倍宽 */
.appt-detail .d-tbl .tbl th.w3 { width: 21em; }
@media (max-width: 900px) { .appt-detail .d-kv, .appt-detail.four .d-kv { grid-template-columns: 1fr; } }
/* 待收样品 15 行全部展开，列表自身不滚动（弹窗过高时由 .m-body 兜底滚动） */
.appt-right .rows-wrap { max-height: none; }
.appt-right .rows thead th { text-align: center; }
.cal-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 1100px) { .appt-split { grid-template-columns: 1fr; } }

/* ---------- 明细行 ---------- */
.detail-row td { background: #fbfcfe; }
.rows { width: 100%; border-collapse: collapse; }
.rows th, .rows td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.rows th { color: var(--ink-2); font-weight: 600; font-size: 13px; text-align: left; }
.rows .input { padding: 6px 9px; }
/* 自动带入的样品行：只读，只能整行删除 */
.rows .input[readonly] { background: #f4f6f9; color: var(--ink-2); border-color: #e2e7ee; cursor: default; }
/* 修改预约时新加入的委托单样品行：绿色标识 */
.rows tr.new > td { background: #eafaf0; }
.rows tr.new .input[readonly] { background: #f3fbf6; border-color: #bfe6cd; }

/* 样品明细：12 行固定高度会顶穿弹窗，改为表体内滚 + 表头吸顶，行距收紧 */
.rows-wrap { max-height: 44vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
/* 高度随内容自然增长（只保留横向滚动），用于缺陷统计的分区明细 */
.rows-wrap.grow { max-height: none; }
.rows-wrap table { border-collapse: separate; border-spacing: 0; }
.rows-wrap thead th { position: sticky; top: 0; z-index: 1; background: #f6f8fb;
  border-bottom: 1px solid var(--line); padding: 7px 8px; }
.rows-wrap tbody th, .rows-wrap tbody td { padding: 4px 6px; }
.rows-wrap tbody tr:last-child td { border-bottom: none; }
.rows-wrap .input { padding: 5px 8px; }
.rows th.ctr, .rows td.ctr { text-align: center; }
/* 委托明细：定宽布局，规格/强度/数量/单位收窄，多出来的宽度给工程部位和养护防护 */
.rows-comm { table-layout: fixed; --c-spec: 132px; }
.rows-comm th.w-spec { width: var(--c-spec); }
.rows-comm td.del { text-align: center; }
/* 窄屏放不下这一行：除工程部位外每列都是定宽，唯一的弹性列会被挤到 4px 宽、输入框只剩 18px
   根本填不了（实测 500px 视口）。改成每个样品一张卡片、字段带小标签换行排列。
   宽屏不受影响——1025px 视口下工程部位仍有 173px。 */
@media (max-width: 1024px) {
  .rows-comm, .rows-comm tbody { display: block; }
  /* 窄屏通用规则 .rows-wrap table.rows { min-width: 780px } 是给别的明细表横滚用的，
     会把卡片撑到 780px 又横向溢出；这里多带一个类压过它，豁免委托明细。 */
  .rows-wrap table.rows.rows-comm { min-width: 0; }
  .rows-comm thead { display: none; }
  .rows-comm tbody tr { position: relative; display: flex; flex-wrap: wrap; gap: 8px;
    padding: 8px 42px 10px 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; }
  .rows-comm tbody tr:last-child { margin-bottom: 0; }
  .rows-comm tbody td { display: block; flex: 1 1 calc(50% - 8px); min-width: 0; padding: 0; border: none; }
  .rows-comm tbody td::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 2px; }
  /* 序号那格改成卡片标题，删除按钮挪到卡片右上角 */
  .rows-comm tbody td.ctr { flex: 1 1 100%; color: var(--ink-2); font-weight: 600; }
  .rows-comm tbody td.ctr::before { content: attr(data-label) ' '; display: inline; color: inherit; font-size: inherit; }
  .rows-comm tbody td.pos { flex: 1 1 100%; }
  .rows-comm tbody td.del { position: absolute; top: 5px; right: 5px; flex: none; }
  .rows-comm tbody td.del::before { content: none; }
}
.rows-note { color: var(--ink-3); font-size: 12px; margin: 6px 0 0; }
.h4-note { font-weight: 400; color: var(--ink-3); font-size: 12.5px; margin-left: 4px; }

/* 弹窗内表单比页面表单更紧凑，尽量少滚动 */
.modal .grid { gap: 10px 14px; }
.modal .field { margin-bottom: 0; }
.modal textarea.input { min-height: 52px; }
.modal h4 { margin: 4px 0 8px; }

/* ---------- 提示 / 弹窗 ---------- */
#toasts { position: fixed; top: 16px; right: 16px; z-index: 1000; display: grid; gap: 10px; }
.toast { min-width: 240px; max-width: 420px; padding: 11px 14px; border-radius: 8px; color: #fff;
  background: #2b3440; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); animation: in .18s ease-out; font-size: 13.5px; }
.toast.ok { background: var(--ok); }
.toast.err { background: var(--err); }
@keyframes in { from { transform: translateY(-8px); opacity: 0; } }

/* 弹窗：整体不超出视口，超高时只让正文滚动，标题与按钮始终可见。
   注意不能用 place-items:center 而不加 overflow —— 比屏幕高的弹窗顶部会被裁掉且滚不到。 */
.mask { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; }
.modal { width: 460px; max-width: 100%; background: #fff; border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3); overflow: hidden;
  display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.modal.wide { width: 880px; }
/* 新建委托：委托头 + 样品明细列多，弹窗更宽 */
.modal.xwide { width: 1180px; }
/* 新建委托比一般宽弹框再宽 80px */
.modal.cwide { width: 1260px; }
/* 样品明细的第二行：次要字段横排，每项带小标签，检测参数占大头 */
.rows tr.s2 td { border-bottom: 1px solid var(--line); padding-top: 0; }
.rows tr.s2 .sline { display: flex; gap: 8px; align-items: center; }
.rows tr.s2 .sl { display: flex; align-items: center; gap: 4px; flex: 1 1 100px; min-width: 0; margin: 0; }
.rows tr.s2 .sl.grow { flex: 2 1 200px; }
/* 日期占上排「规格尺寸」那一格（标签放在序号格里），左右边缘都跟上排对齐；龄期只有两三位数 */
.rows tr.s2 td.lbl { font-size: 11px; color: var(--ink-3); text-align: right; padding-right: 2px; white-space: nowrap; }
.rows tr.s2 .sl-date { flex: 0 0 calc(var(--c-spec, 150px) - 12px); }
.rows tr.s2 .sl-age { flex: 0 1 86px; }
.rows tr.s2 .sl > span { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.rows tr.s2 .sl .input { min-width: 0; flex: 1; }
.modal .m-head { flex: 0 0 auto; padding: 15px 18px; border-bottom: 1px solid var(--line); font-weight: 600; }
.modal .m-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px; }
.modal .m-body.m-text { white-space: pre-wrap; }   /* 仅确认/提示框的纯文本需要保留换行 */
/* 详情对话框：加宽 30%，段落前留半行空，各段落缩进 4 字，折行续行对齐到标签之后 */
.modal.detail { width: 598px; }
.modal.detail .m-lines { white-space: pre-wrap; line-height: 1.6; }
.modal.detail .m-line { padding-left: calc(4em + var(--lab, 0em)); text-indent: calc(var(--lab, 0em) * -1); }
.modal.detail .m-line + .m-line { margin-top: 0.8em; }
.modal .m-foot { flex: 0 0 auto; padding: 12px 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 10px; background: #fafbfc; }
@media (max-width: 640px) {
  .mask { padding: 0; }
  .modal, .modal.wide, .modal.xwide, .modal.detail { width: 100%; max-height: 100vh; border-radius: 0; }
  .grid.c3, .grid.c4, .grid.c-head, .grid.c-appt { grid-template-columns: 1fr; }
}

.loading { padding: 50px; text-align: center; color: var(--ink-3); }
.spin { display: inline-block; width: 15px; height: 15px; border: 2px solid #cfd8e3; border-top-color: var(--brand);
  border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -3px; }
@keyframes sp { to { transform: rotate(360deg); } }

.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; font-size: 13.5px; }
/* 工作台账户信息：两组「标签 + 内容」并排成两列（窄屏回退成一行一组） */
.kv.kv-2 { grid-template-columns: 110px minmax(0, 1fr) 110px minmax(0, 1fr); gap: 8px 26px; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; word-break: break-all; }


/* ================= 照明设施检测模块 ================= */
.sec { margin: 22px 0 10px; font-size: 15px; color: var(--ink); border-left: 3px solid var(--brand); padding-left: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; }
.stat { background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.stat-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.stat-value { font-size: 20px; font-weight: 600; color: var(--brand); }
.bar-outer { height: 6px; background: #e3e8ef; border-radius: 3px; margin-top: 10px; overflow: hidden; }
.bar-inner { height: 100%; background: var(--brand); border-radius: 3px; }

.chart-block { margin: 12px 0 20px; }
/* 检测进度页：日检测进度加高 15%（130→150），区进度相应压缩 */
#ltDaily .bars { height: 150px; }
#ltPie .pie { width: 220px; height: 220px; }
#ltLegend .li { line-height: 21px; }
.chart-title { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 130px; border-bottom: 1px solid var(--line); padding: 0 2px; }
.bars .bar { flex: 1; min-width: 4px; background: var(--brand); border-radius: 2px 2px 0 0; opacity: .85; }
.bars .bar:hover { opacity: 1; }
.axis { display: flex; gap: 2px; font-size: 10px; color: var(--muted); padding: 3px 2px 0; }
.axis span { flex: 1; min-width: 4px; text-align: center; overflow: hidden; }

.pie-wrap { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.pie { width: 280px; height: 280px; border-radius: 50%; flex: 0 0 auto; }
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; font-size: 13px; }
.legend .li { display: flex; align-items: center; gap: 6px; }
/* 区进度：整块居中，图例两列 */
.pie-wrap.centered { justify-content: center; }
.pie-legend { grid-template-columns: repeat(2, minmax(150px, max-content)); }
/* 检测进度两处图例（月份 / 区进度）行高在原 20.8px 基础上加 30% */
.month-legend .li { line-height: 43.2px; }
.pie-legend .li { line-height: 21px; }
.month-legend, .pie-legend { row-gap: 4px; }
.legend .li i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }

.hbars { display: flex; flex-direction: column; gap: 5px; }.hbar-row { display: grid; grid-template-columns: 120px 1fr 70px; align-items: center; gap: 10px; font-size: 13px; }
.hbar-name { text-align: right; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { background: #eef1f6; border-radius: 3px; height: 16px; overflow: hidden; }
.hbar { height: 100%; background: linear-gradient(90deg, #2e8b57, #57b98a); border-radius: 3px; }
.hbar-val { font-variant-numeric: tabular-nums; }

.tbl tr.row-click { cursor: pointer; }
/* 卡片标题右侧的状态筛选复选框（默认全选 = 不筛选），与标题空 5 个字符宽 */
.card > .card-head .ch-left { display: flex; align-items: center; gap: 5em; flex-wrap: wrap; }
.c-filter { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.c-filter[hidden] { display: none; }
.c-filter .li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; cursor: pointer; user-select: none; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.c-filter .li:hover { background: #eef3fa; }
.c-filter .li i { width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; }
.c-filter .li.off { opacity: .35; text-decoration: line-through; }
.tbl tr.row-click:hover td { background: #f2f7ff; }
.tbl tr.sel td { background: #d8e8fb !important; }
/* 列表行内展开的详情：作为表格的一行插在本行下方，后面的记录随之上移 */
.tbl tr.detail-row > td { padding: 0 12px 12px; border: 0; background: #fff; }
.tbl tr.detail-row:hover > td { background: #fff; }
.tbl tr.detail-row .appt-detail { margin-top: 10px; }
/* 已撤销的委托单：记录保留，字体变浅 */
.tbl tr.revoked > td { color: var(--ink-3); }
.tbl tr.revoked > td .tag { opacity: .7; }
/* 表格操作列的按钮：图标 + 文字，图标与侧栏同风格 */
.btn.ibtn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; }
.btn.ibtn svg { width: 14px; height: 14px; display: block; flex: none; }
.tbl td.wrap { max-width: 260px; }
/* 取样规格表：整行垂直居中，序号/报告时效水平居中，窄列压缩内边距，详情按钮加宽并垂直居中 */
table.tbl.rules-tbl td.ctr, table.tbl.rules-tbl th.ctr { text-align: center; }
table.tbl.rules-tbl th.narrow, table.tbl.rules-tbl td.narrow { padding-left: 6px; padding-right: 6px; }
.rules-tbl .btn.sm { min-width: 84px; vertical-align: middle; }
/* 取样规格表右上角分页 */
.rtop { display: flex; align-items: center; gap: 10px; }
.tbl td.defect, .concl .defect { color: #c0392b; font-weight: 600; }
.tbl td.pending, .concl .pending { color: #8a8f98; font-style: italic; }

.concl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; }
.concl > div { background: #fff8f6; border: 1px solid #f2d9d3; border-radius: 8px; padding: 12px 14px; color: #c0392b; }
.concl > div.pending { background: #f6f7f9; border-color: var(--line); color: #8a8f98; font-style: italic; }
.concl span { display: block; font-size: 12px; color: var(--muted); font-style: normal; margin-bottom: 4px; }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 10px; }
/* 结果数据页：左（记录信息，三列）+ 右（现场照片，靠右）整行填满 */
.lt-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: start; }
.lt-split div.kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lt-split .photos { grid-template-columns: repeat(4, 146px); margin-top: 0; width: auto; justify-content: end; }
/* 四幅照片一排，单张宽高比 2:3 */
.lt-split .photos img, .lt-split .photos figure.empty .ph { height: auto; aspect-ratio: 2 / 3; }
.lt-split div.kv > div.wide { grid-column: 1 / -1; }
@media (max-width: 1100px) { .lt-split { grid-template-columns: 1fr; } }
.photos figure { margin: 0; }
/* 通用 .empty 的 40px 内边距会把占位框整体下推，导致与有照片的格子上下错位 */
.photos figure.empty { padding: 0; text-align: left; }
.photos img { display: block; width: 100%; height: 240px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: zoom-in; }
.photos figure.empty .ph { width: 100%; height: 240px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--line); border-radius: 6px; background: #fafbfc; }
.photos figcaption { font-size: 12px; color: var(--muted); margin-top: 5px; text-align: center; word-break: break-all; }

/* 图表浮动提示 */
.chart-tip { position: fixed; z-index: 1300; max-width: 260px; padding: 6px 9px; border-radius: 6px;
  background: #16233a; color: #fff; font-size: 12px; line-height: 1.5; white-space: pre-line;
  pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
/* 照片点击放大：再点图片或点遮罩恢复 */
.zoom-mask { position: fixed; inset: 0; background: rgba(12, 18, 28, .62); z-index: 1100; cursor: zoom-out; }
.photos img.zoomed { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto; max-width: 94vw; max-height: 92vh; object-fit: contain;
  z-index: 1150; cursor: zoom-out; border: 0; border-radius: 6px; background: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55); }

.error { color: var(--err); }

/* 日检测进度：同一条日轴上按月分色的分组柱状图 */
.bars.grouped { gap: 3px; }
.bargroup { flex: 1; min-width: 6px; height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.bargroup i { flex: 1; min-width: 2px; border-radius: 1px 1px 0 0; opacity: .88; }
.bargroup:hover i { opacity: 1; }
.month-legend { margin-bottom: 10px; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
/* 缺陷统计：图例行高比检测进度低 20%，图表与明细表之间收紧 */
.defect-legend { margin-bottom: 6px; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.defect-legend .li { line-height: 12.2px; }
.chart-block.tight { margin: 12px 0 4px; }
h4.sec.after-chart { margin-top: 6px; }
.legend .li.clickable { cursor: pointer; user-select: none; border-radius: 4px; padding: 1px 4px; }
.legend .li.clickable:hover { background: #eef3fa; }
.legend .li.off { opacity: .35; text-decoration: line-through; }
.linechart { width: 100%; height: auto; display: block; }

/* 结果数据分页 */
.pager { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
/* 满意度调查 · 填写页 */
.sv-tabs { display: inline-flex; gap: 4px; margin-bottom: 16px; background: #e9eef5; border-radius: 11px; padding: 4px; }
.sv-tabs .btn, .sv-tabs .btn.ghost { background: transparent; color: var(--ink-2); border: 0; border-radius: 8px; padding: 7px 18px; font-size: 13.5px; }
.sv-tabs .btn:hover, .sv-tabs .btn.ghost:hover { background: rgba(255, 255, 255, .72); color: var(--brand); }
.sv-tabs .btn:not(.ghost) { background: #fff; color: var(--brand-dark); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .14); }
.sv-tabs .btn:not(.ghost):hover { background: #fff; color: var(--brand-dark); }

.pg-hero { position: relative; overflow: hidden; display: flex; gap: 18px; align-items: flex-start;
  border-radius: 14px; padding: 26px 28px; color: #fff;
  background: linear-gradient(118deg, #12325a 0%, #1b5fbd 58%, #2f86d8 100%); box-shadow: 0 10px 26px rgba(18, 50, 90, .22); }
.pg-hero::after { content: ""; position: absolute; right: -70px; top: -80px; width: 250px; height: 250px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.pg-hero::before { content: ""; position: absolute; right: 90px; bottom: -110px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.pg-hero-ico { position: relative; flex: none; width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .94); box-shadow: 0 6px 16px rgba(9, 30, 60, .22); }
.pg-hero-ico img { width: 30px; height: 30px; }
.pg-hero-txt { position: relative; min-width: 0; }
.pg-hero h3 { font-size: 21px; letter-spacing: .4px; }
.pg-hero-i { margin: 8px 0 0; max-width: 780px; font-size: 13.5px; line-height: 1.8; color: #d6e5f7; }
.pg-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.sv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); color: #e6f0fb; }
.sv-chip b { font-weight: 600; color: #fff; }

.sv-list { margin-top: 14px; display: grid; gap: 12px; }
.sv-q { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; box-shadow: var(--shadow);
  transition: border-color .18s, box-shadow .18s; }
.sv-q:hover { border-color: #cfdcec; }
.sv-q.done { border-color: #bfe0cd; box-shadow: 0 0 0 3px rgba(31, 146, 84, .07), var(--shadow); }
.sv-q-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 13px; }
.sv-q-tt { min-width: 0; }
.sv-no { flex: none; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 7px; background: var(--brand-light); color: var(--brand-dark);
  font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; }
.sv-q.done .sv-no { background: #e4f6ec; color: var(--ok); }
.sv-t { font-weight: 600; font-size: 15px; line-height: 1.5; }
.sv-q > .input { max-width: 620px; display: block; }

.sv-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 10px; }
.sv-ck { position: relative; display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; user-select: none;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; transition: border-color .15s, background .15s, color .15s; }
.sv-ck:hover { border-color: #b9cfe8; background: #f4f8fd; }
.sv-ck input { position: absolute; opacity: 0; width: 0; height: 0; }
.sv-ck .sv-box { flex: none; width: 17px; height: 17px; border: 1.5px solid #c3cedb; border-radius: 5px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.sv-ck .sv-box::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0;
  margin-top: -2px; transform: rotate(-45deg) scale(0); transition: transform .15s; }
.sv-ck input:checked ~ .sv-box { background: var(--brand); border-color: var(--brand); }
.sv-ck input:checked ~ .sv-box::after { transform: rotate(-45deg) scale(1); }
.sv-ck input:focus-visible ~ .sv-box { box-shadow: 0 0 0 3px rgba(27, 95, 189, .2); }
.sv-ck:has(input:checked) { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }

.sv-rate { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stars { display: flex; align-items: center; gap: 3px; }
.stars .star { background: none; border: 0; cursor: pointer; font-size: 27px; line-height: 1; color: #dbe2ea; padding: 0 2px; transition: color .12s, transform .12s; }
.stars .star:hover { transform: scale(1.18); }
.stars .star.on { color: #f5a623; text-shadow: 0 1px 4px rgba(245, 166, 35, .38); }
.stars .star.hv { color: #fbc96a; }
.sv-val { margin-left: 10px; min-width: 54px; display: inline-flex; justify-content: center; padding: 3px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; background: #f1f4f8; color: var(--ink-2); }
.sv-val.on { background: #fdf3e0; color: #b7791f; }
.sv-scale { display: flex; justify-content: space-between; width: 300px; max-width: 100%; margin-top: 7px; font-size: 11.5px; color: var(--ink-3); }

.sv-dock { position: sticky; bottom: 0; margin-top: 14px; display: flex; align-items: center; gap: 18px;
  background: rgba(255, 255, 255, .93); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 20px; box-shadow: 0 -2px 18px rgba(16, 24, 40, .07); }
.sv-prog { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.sv-prog-t { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.sv-prog-t b { color: var(--brand); font-size: 15px; }
.sv-prog-track { flex: 1 1 auto; max-width: 320px; height: 7px; border-radius: 4px; background: #eef2f6; overflow: hidden; }
.sv-prog-track i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #5aa0d8, #1b5fbd); transition: width .3s ease; }
.sv-tip { font-size: 12.5px; color: var(--ink-3); }
.sv-dock .btn { min-width: 168px; flex: none; }

/* ---------- 报告查验 ---------- */
.rp-card { border-radius: 12px; }
.rp-body { padding: 22px 24px 16px; }
.rp-fields { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.rp-fields .field { margin: 0; }
.rp-f { flex: 1 1 240px; max-width: 340px; }
.rp-big { padding: 11px 14px !important; font-size: 15.5px !important; letter-spacing: .6px; }
.rp-go { padding: 11px 30px; font-size: 15px; box-shadow: 0 4px 12px rgba(27, 95, 189, .24); }
.rp-hint { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-3); }
.rp-res { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.rp-res-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px;
  background: linear-gradient(118deg, #12325a, #1b5fbd 70%, #2f86d8); color: #fff; }
.rp-res-no { font-size: 19px; font-weight: 700; letter-spacing: .6px; font-variant-numeric: tabular-nums; }
.rp-res-sub { font-size: 12.5px; color: #cfe1f6; margin-top: 3px; }
.rp-pass { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34); }
.rp-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rp-i { background: #fff; padding: 13px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rp-i span { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 3px; }
.rp-i b { font-weight: 600; font-size: 14px; word-break: break-all; }
.rp-res-row { display: flex; gap: 14px; padding: 14px 24px; border-top: 1px solid var(--line); }
.rp-k { flex: none; width: 76px; font-size: 12.5px; color: var(--ink-3); padding-top: 2px; }
.rp-v { flex: 1 1 auto; min-width: 0; line-height: 1.7; }
.rp-conc { font-weight: 700; color: var(--ok); }

/* ---------- 用户设置 ---------- */
.pf-avatar { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .95); color: var(--brand-dark); font-size: 24px; font-weight: 700; box-shadow: 0 6px 16px rgba(9, 30, 60, .22); }
.pf-card { border-radius: 12px; }
.pf-card .card-head h3 { display: flex; align-items: center; gap: 8px; }
.pf-card .card-head h3::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--brand); }
.pf-hint { font-size: 12.5px; color: var(--ink-3); }
.pf-ro { background: #f5f7fa !important; color: var(--ink-2) !important; }
.pf-foot { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.pf-foot .btn { min-width: 132px; }

/* ---------- 取样规则查询 ---------- */
.rl-card { border-radius: 12px; }
.rl-body { padding: 20px 22px; }
.rl-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rl-box { position: relative; flex: 1 1 320px; max-width: 460px; }
.rl-box .input { padding-left: 36px; height: 40px; }
.rl-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; display: flex; }
.rl-cat { max-width: 190px; height: 40px; }
.rl-search .btn { height: 40px; padding: 0 26px; }
.rl-meta { display: flex; align-items: center; gap: 14px; margin: 14px 0 10px; min-height: 26px; }
.rl-meta .rtop { margin-left: auto; }
.rl-empty { padding: 44px 20px; text-align: center; color: var(--ink-3); font-size: 13.5px;
  background: #fbfcfe; border: 1px dashed var(--line); border-radius: 10px; }
.rules-tbl thead th { background: #f4f8fc; }
.rules-tbl tbody tr:hover { background: #f6faff; }

.sv-kpis { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.sv-kpi { flex: 1 1 150px; background: #f6f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.sv-kpi b { display: block; font-size: 22px; color: var(--brand); line-height: 1.3; }
.sv-kpi span { font-size: 12px; color: var(--muted); }
.sv-bar { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.sv-bar-l { width: 24px; font-size: 12px; color: var(--ink-3); flex: none; }
.sv-bar-t { flex: 1 1 auto; display: inline-block; height: 8px; background: #eef2f6; border-radius: 4px; overflow: hidden; vertical-align: middle; min-width: 50px; }
.sv-bar-t i { display: block; height: 100%; background: linear-gradient(90deg, #5aa0d8, #2b7ab5); }
.sv-bar-n { width: 34px; font-size: 12px; color: var(--ink-2); text-align: right; flex: none; }
.sv-t .sv-no { font-weight: 700; margin-right: 7px; }
.sv-note { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.sv-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.sv-range label { font-size: 13px; color: var(--ink-2); }
.sv-range input[type=date] { width: 152px; }
.sv-range #svExport { margin-left: auto; }
.q-row { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #fcfdfe; }
.q-side { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 40px; flex: none; }
.q-no { font-weight: 700; color: var(--ink-3); }
.q-mv { width: 26px; height: 22px; border: 1px solid var(--line); background: #fff; border-radius: 5px; cursor: pointer; font-size: 12px; line-height: 1; color: var(--ink-2); }
.q-mv:hover { border-color: var(--brand); color: var(--brand); }
.q-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.q-title { font-weight: 600; }
.q-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-sub .q-kind { width: 92px; flex: none; }
.q-sub .q-note { flex: 1 1 240px; min-width: 160px; }
.q-ck { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.q-ck input { accent-color: var(--brand); }
.q-maxw { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.q-maxw .q-max { width: 62px; }
.q-acts { display: flex; flex-direction: column; gap: 8px; flex: none; }
.q-row.q-new { animation: qflash 1.4s ease-out; }
@keyframes qflash { from { background: #fff4d6; border-color: #e8c46a; } to { background: #fcfdfe; border-color: var(--line); } }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 同条件气温：嵌入的天气月历页面 */
.weather-frame { display: block; width: 100%; height: calc(100vh - 96px); min-height: 520px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* 标题行：左侧小标题、右侧分页（按基线对齐，标题上下留白对称保证居中） */
.sec-row { display: flex; align-items: baseline; gap: 14px; }
.sec-row .sec { margin: 22px 0 10px; }
.sec-row .pager { margin: 0 0 0 auto; }
.pager .muted { min-width: 170px; text-align: center; }
/* div 版键值对（照明明细用，字段多且长短不一，按宽度自动折行） */
div.kv { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
div.kv > div { display: flex; flex-direction: column; gap: 3px; }
div.kv > div > span { color: var(--ink-2); font-size: 12px; }
div.kv > div > b { font-weight: 600; word-break: break-all; }
div.kv > div.wide { grid-column: span 3; }

/* 表格横向滚动容器（由 app.js 自动套上）：桌面端不改变布局，窄屏才在容器内滚动 */
.tbl-scroll { min-width: 0; }

/* ================= 手机端（≤860px，含 20.5:9 全面屏）=================
   所有规则都锁在媒体查询内，电脑端（>860px）布局与尺寸完全不受影响。
   目标：触控目标够大、输入框不触发 iOS 聚焦缩放、弹窗整屏且按钮贴底、
        宽表横向滑动、长页面避开刘海与手势条。 */
@media (max-width: 860px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }

  /* —— 触控目标 —— */
  .btn { padding: 10px 16px; min-height: 42px; font-size: 15px; }
  .btn.sm { padding: 7px 12px; min-height: 34px; font-size: 13.5px; }
  /* 输入框 16px：小于 16px 时 iOS Safari 聚焦会自动放大整页 */
  .input, select.input, textarea.input { font-size: 16px; padding: 10px 12px; min-height: 42px; }
  textarea.input { min-height: 74px; }
  .field { margin-bottom: 16px; }
  .field > label { font-size: 14px; margin-bottom: 6px; }
  .nav a, .nav-head { padding-top: 12px; padding-bottom: 12px; }
  .side-close { top: 12px; right: 10px; width: 36px; height: 36px; font-size: 22px; }

  /* —— 页面留白与刘海/手势条安全区 —— */
  .content { padding: 14px 12px calc(26px + env(safe-area-inset-bottom)); }
  .card > .card-head { padding: 12px 14px; }
  .card > .card-body { padding: 14px 12px; }
  .card + .card { margin-top: 14px; }
  /* 网格内的卡片间距由 gap 控制，否则同行卡片会被 margin 顶得错位 */
  .grid > .card { margin-top: 0; }

  /* —— 顶栏：次要信息省略，标题可省略号，按钮保持可点 —— */
  .topbar { padding: 0 12px 0 10px; gap: 10px; }
  .topbar h2 { font-size: 15.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 标题后的补充说明在手机上太占位，隐藏（正文里仍有说明） */
  .topbar h2 small.sub-note { display: none; }
  .topbar .who { gap: 8px; min-width: 0; }
  .topbar .who #whoText { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 手机上顶栏不显示长项目名，标题才有位置；退出按钮不许折行 */
  #whoText .who-tail { display: none; }
  #logoutBtn { white-space: nowrap; flex: none; }

  /* —— 弹窗：整屏、正文滚动、底部按钮平分并避开手势条 —— */
  .mask { padding: 0; }
  .modal, .modal.wide, .modal.xwide, .modal.detail { width: 100%; max-height: 100dvh; border-radius: 0; }
  .modal .m-head { padding: 14px; font-size: 15.5px; }
  .modal .m-body { padding: 14px 12px; -webkit-overflow-scrolling: touch; }
  .modal .m-foot { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .modal .m-foot .btn { flex: 1 1 0; min-width: 0; }

  /* —— 表格：横向滑动顺手、行内按钮不挤 —— */
  .rows-wrap, .appt-detail .d-tbl, .sec-row + .rows-wrap { -webkit-overflow-scrolling: touch; }
  /* 宽表在自身容器内横向滚动，整页不跟着变宽（参照缺陷统计「分区明细」） */
  .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-scroll > table { max-width: none; }
  .tbl th, .tbl td { padding: 8px 9px; }
  .tbl tr.row-click:active td { background: #e6f0fb; }
  .pager { flex-wrap: wrap; gap: 8px 12px; }
  .pager .muted { min-width: 0; }
  .sec-row { flex-wrap: wrap; gap: 8px 14px; }
  .sec-row .pager { margin-left: 0; }

  /* —— 键值与详情：不再三/四列并排，改单列上下排 —— */
  .kv { grid-template-columns: 92px 1fr; gap: 8px 10px; font-size: 14px; }
  .kv.kv-2 { grid-template-columns: 92px 1fr; }
  div.kv { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  div.kv > div.wide { grid-column: 1 / -1; }
  .appt-detail .d-kv, .appt-detail.four .d-kv { grid-template-columns: 1fr; }
  .appt-detail .kv > span { flex: 0 0 6.5em; }

  /* —— 满意度：星与多选的点击区加大 —— */
  .stars .star { font-size: 32px; padding: 2px 6px; }
  .sv-checks { grid-template-columns: 1fr; }
  .sv-ck { padding: 12px 14px; font-size: 15px; }
  .sv-ck .sv-box { width: 19px; height: 19px; }
  .pg-hero { padding: 20px; gap: 14px; }
  .pg-hero h3 { font-size: 18px; }
  .pg-hero-ico { width: 44px; height: 44px; border-radius: 13px; }
  .pg-hero-ico img { width: 26px; height: 26px; }
  .sv-q { padding: 16px; }
  .sv-dock { padding: 10px 14px; gap: 12px; }
  .sv-dock .btn { min-width: 118px; }
  .sv-tip { display: none; }
  .rp-body { padding: 16px; }
  .rp-f { max-width: none; }
  .rp-go { width: 100%; }
  .rp-res-head { padding: 15px 16px; }
  .rp-i { padding: 11px 16px; }
  .rp-res-row { padding: 12px 16px; gap: 10px; }
  .rl-body { padding: 14px; }
  .rl-box { max-width: none; flex-basis: 100%; }
  .rl-cat { max-width: none; flex: 1 1 auto; }
  .rl-search .btn { flex: 1 1 auto; }
  .pf-foot { flex-wrap: wrap; gap: 10px; }
  .pf-foot .pf-hint { display: none; }
  .sv-kpi { flex: 1 1 calc(50% - 7px); padding: 10px 12px; }
  .sv-kpi b { font-size: 19px; }
  .sv-range { padding: 10px 12px; }
  .sv-range input[type=date] { width: 46%; min-width: 132px; }
  .sv-range #svExport { margin-left: 0; }
  .q-acts { gap: 10px; }
  .q-mv { width: 34px; height: 30px; font-size: 14px; }

  /* —— 弹窗内的多列字段：窄屏一律单列，标签在上输入框在下 —— */
  .modal .grid.c-head, .modal .grid.c-appt, .modal .grid.c2, .modal .grid.c3, .modal .grid.c4 { grid-template-columns: minmax(0, 1fr); }
  .modal .grid.c-head .field > label { flex: 0 0 6.5em; width: 6.5em; }
  /* 委托备注等字段带内联 grid-column:span 3，单列下会撑出隐式列把整表挤回多列，必须压掉 */
  .modal .grid > [style*="grid-column"] { grid-column: auto !important; }
  .modal .grid.c-head > .c-span2, .modal .grid.c-head > .c-span4 { grid-column: auto; }
  /* 检测参数面板在窄屏改到明细下方，不再并排 */
  .sec-split { grid-template-columns: minmax(0, 1fr); }
  /* 明细第二行改换行排，别把日期、龄期挤成一条缝 */
  .rows tr.s2 .sline { flex-wrap: wrap; row-gap: 6px; }
  .rows tr.s2 .sl { flex: 1 1 150px; }
  .rows tr.s2 .sl-date { flex: 0 0 calc(var(--c-spec, 150px) - 12px); }
  .rows tr.s2 .sl-age { flex: 0 1 92px; }
  /* 第二行换行后表格不再被撑开，主行会被压扁，这里给回列宽让它在容器内横滚 */
  .rows-wrap table.rows { min-width: 780px; }
  .sec + .sec, .sec + .sec-split { margin-top: 14px; }
  .param-box { max-height: 240px; }
  .modal .rows-wrap { max-height: 46vh; }
  .rows th, .rows td { padding: 5px 6px; }
  .rows-wrap tbody td { padding: 4px 5px; }

  /* —— 分栏与嵌入页 —— */
  .lt-split, .appt-split { gap: 14px; }
  .lt-split .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; justify-content: start; }
  .lt-split div.kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-frame { height: calc(100dvh - 150px); min-height: 480px; }

  /* —— 提示条不挡屏 —— */
  #toasts { left: 12px; right: 12px; top: 12px; }
  .toast { min-width: 0; max-width: none; }
}

/* ---------- 打印预览（版式照「材料类检测申请单」） ---------- */
.modal.print-modal { width: min(1200px, 96vw); }
.print-modal .m-body { background: #eef1f5; display: flex; flex-direction: column; align-items: center; }
.pf-bar { display: flex; align-items: center; gap: 10px; }
.pf-bar .sp { flex: 1 1 auto; }
/* 打印按钮加宽三成（原约 60px） */
.pf-bar .pf-print-btn { min-width: 78px; justify-content: center; }
/* 预览纸面 = A4 横向原样比例（96dpi 下 1123×794），四周留 @page 的 12mm/10mm 页边距；
   字号行距与打印一致，屏幕上看到的高宽比就是打印出来的高宽比 */
.pf { font-family: "SimSun", "宋体", serif; color: #000; font-size: 10.5px; line-height: 1.35;
  background: #fff; width: 1123px; min-height: 794px; box-sizing: border-box;
  margin: 0 auto; padding: 38px 45px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.pf-page { text-align: right; font-size: 10px; }
.pf-title { text-align: center; font-size: 17px; font-weight: 700; letter-spacing: 3px; margin: 16px 0 6px; }
.pf-no { display: flex; justify-content: space-between; margin-bottom: 5px; }
/* 「委托编号：」后面留出写正式编号的空白（25 个字符宽） */
.pf-no .gap { display: inline-block; width: 25ch; }
.pf-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pf-tbl td { border: 1px solid #000; padding: 3px; line-height: 1.5; text-align: center;
  vertical-align: middle; font-weight: 400; word-break: break-all; }
/* 外框粗、内框细：粗边画在首末行和真正贴着外框的单元格上，不用表格自身边框，免得叠成双线 */
.pf-tbl tr:first-child > td { border-top: 2px solid #000; }
.pf-tbl tr:last-child > td { border-bottom: 2px solid #000; }
.pf-tbl .pf-side, .pf-tbl td.lf { border-left: 2px solid #000; }
.pf-tbl tr > td:last-child { border-right: 2px solid #000; }
.pf-tbl td.left { text-align: left; word-break: normal; }
/* 样品编号是受理时由承接人正式填写，打印出来用浅灰提示 */
.pf-tbl td.pf-dim { color: #9a9a9a; }
.pf-side { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0; font-size: 8px;
  padding: 1px !important; white-space: nowrap; }
/* 乙方栏：横排显示 */
.pf-side.n2 { writing-mode: horizontal-tb; text-orientation: mixed; letter-spacing: 0; font-size: 10px; white-space: normal; }
.pf-foot { display: flex; justify-content: space-between; margin-top: 24px; }
/* 三个签名各占三分之一，日期靠右 */
.pf-foot > span { flex: 1 1 0; }
.pf-foot > span:last-child { flex: 0 0 auto; text-align: right; }
/* 签名栏：入库后把取样人/见证人的名字打在横线上，没入库就是一条空线 */
.pf-sign { display: inline-block; min-width: 6em; border-bottom: 1px solid #333; text-align: center; font-style: normal; }
/* 多页：预览时页与页之间留缝 */
.pf + .pf { margin-top: 18px; }
/* 打印时只留表单本身，弹窗外壳、导航、列表全部隐藏 */
@page pf { size: A4 landscape; margin: 10mm 12mm; }
@media print {
  html, body { background: #fff !important; }
  body.printing .pf { page: pf; }
  body.printing > *:not(.print-mask) { display: none !important; }
  body.printing .print-mask { position: static !important; display: block !important;
    background: #fff !important; padding: 0 !important; overflow: visible !important; }
  body.printing .print-mask .modal { width: 100% !important; max-width: none !important; max-height: none !important;
    box-shadow: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
  body.printing .print-mask .m-head, body.printing .print-mask .m-foot { display: none !important; }
  body.printing .print-mask .m-body { overflow: visible !important; max-height: none !important;
    padding: 0 !important; background: #fff !important; }
  body.printing .pf { width: 100%; min-height: 0; box-shadow: none; padding: 0; zoom: 1 !important; }
  /* 一张 A4 一页，最后一页不留空页 */
  body.printing .pf { page-break-after: always; }
  body.printing .pf:last-child { page-break-after: auto; }
}
@media (max-width: 900px) {
  .modal.print-modal { width: 100%; }
  .print-modal .m-body { overflow: auto; }
  .pf { width: 1123px; }
  .pf-tip { display: none; }
}