:root {
  --primary: #2D6CDF;
  --primary-dark: #1E4FA8;
  --primary-light: #EAF1FE;
  --accent: #0E9F9C;
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e6ebf2;
  --danger: #e53935;
  --ok: #2e7d32;
  --radius: 16px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 顶部应用栏 */
.appbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--primary-dark);
  color: #fff;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 14px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.appbar-left { min-width: 0; }
.appbar-title { font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.appbar-sub { font-size: 12px; opacity: .85; margin-top: 2px; }
/* 顶栏当前状态标签：查询码 + 状态 */
.appbar-status {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  color: #fff; border-radius: 999px; padding: 2px 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .5px; white-space: nowrap;
}
/* 字号放大开关 */
.font-toggle {
  flex: 0 0 auto; margin-top: 2px;
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px; width: 38px; height: 34px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.font-toggle.on { background: #fff; color: var(--primary); }
/* 大字体模式：整体放大（含底部操作栏） */
body.large-font { zoom: 1.15; }

/* 容器 */
.container { padding: 12px 12px 120px; max-width: 720px; margin: 0 auto; }

/* 卡片 */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.card-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  display: flex; align-items: center;
}
.card-title::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px;
  background: var(--primary); margin-right: 8px; flex: 0 0 auto;
}

/* 表单 */
.field { margin-bottom: 12px; }
.field > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.req { color: var(--danger); font-style: normal; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-2 .field {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}
/* 两列字段的输入框底部对齐：label 可能换行导致高度不同，用 margin-top:auto 把 input 推到最下方，
   使同一行左右两个输入框上边缘齐平 */
.grid-2 .field > input,
.grid-2 .field > textarea,
.grid-2 .field > select { margin-top: auto; }

input[type="text"], input[type="number"], input[type="date"], textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
select {
  appearance: none;
  -webkit-appearance: none;
  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 fill='%236b7280' d='M1 4l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
textarea { resize: vertical; line-height: 1.6; }

/* 折叠单位 */
.units { margin-top: 4px; border-top: 1px dashed var(--border); padding-top: 8px; }
.units summary {
  cursor: pointer; font-size: 13px; color: var(--primary);
  padding: 6px 0; user-select: none;
}
.units[open] summary { margin-bottom: 8px; }

/* 按钮 */
.primary-btn {
  background: var(--primary); color: #fff; border: none;
  border-radius: 9px; padding: 10px 16px; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.primary-btn.sm { padding: 8px 14px; font-size: 14px; }

/* 快速载入：查询码输入框 + 载入按钮在一行，按钮与输入框等高 */
.load-row { display: flex; gap: 8px; align-items: stretch; }
.load-row input[type="text"] { flex: 1; }
.load-row .primary-btn.sm {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  padding: 0 20px;
  min-width: 70px;
  font-size: 15px;
  letter-spacing: 1px;
}
.ghost-btn {
  background: #fff; color: var(--primary); border: 1px solid var(--primary);
  border-radius: 9px; padding: 10px 16px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.ghost-btn.block { width: 100%; margin-top: 12px; }
.link-btn {
  background: none; border: none; color: var(--primary);
  font-size: 13px; cursor: pointer; padding: 4px;
}
.link-btn.danger { color: var(--danger); }

.hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.hint code { background: var(--primary-light); color: var(--primary-dark); padding: 1px 5px; border-radius: 4px; }
.empty { text-align: center; color: var(--muted); font-size: 13px; padding: 18px 0; }

/* 批次行卡片 */
.row-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: #fbfdff;
  position: relative;
}
.row-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.row-idx { font-size: 13px; color: var(--muted); }
.row-idx .ri {
  display: inline-block; min-width: 20px; height: 20px; line-height: 20px;
  text-align: center; background: var(--primary); color: #fff; border-radius: 50%;
  font-size: 12px; margin-left: 2px;
}
.del-btn {
  background: #ffebee; color: var(--danger); border: none;
  width: 28px; height: 28px; border-radius: 50%; font-size: 15px; cursor: pointer;
}
/* 行操作组：复制 + 删除 */
.row-acts { display: flex; gap: 8px; }
.copy-btn {
  background: #e3f2fd; color: var(--primary); border: none;
  width: 28px; height: 28px; border-radius: 50%; font-size: 14px; cursor: pointer;
}
/* 受检桩号数量核对提示 */
.jczh-check { font-size: 12px; margin: 6px 0 0; font-weight: 600; }
.jczh-check.ok { color: var(--ok); }
.jczh-check.bad { color: var(--danger); }

/* 底部操作栏 */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 8px rgba(16, 24, 40, .08);
  max-width: 720px; margin: 0 auto;
}
.act-row { display: flex; gap: 6px; width: 100%; }
/* 暂存反馈状态条：手机端浮于底部操作栏上方，PC 端浮于页面右上角，不撑大工具条 */
.save-status {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 40;
  width: max-content; max-width: 92%;
  padding: 8px 14px; border-radius: 10px;
  font-size: 13px; text-align: center; font-weight: 600;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .10);
  pointer-events: none;
}
.save-status.ok { background: #e8f5e9; color: #2e7d32; }
.save-status.warn { background: #fff3e0; color: #ef6c00; }
.save-status.urgent { background: #fdecea; color: #e53935; }
.act {
  flex: 1; border: none; background: #f1f5f9; color: var(--text);
  border-radius: 10px; padding: 10px 4px; font-size: 13px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.act .act-ico { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.act .act-ico svg { width: 22px; height: 22px; display: block; }
.act-spin { animation: actspin .8s linear infinite; }
@keyframes actspin { to { transform: rotate(360deg); } }
.act.main { background: var(--primary); color: #fff; font-weight: 700; }
.act:active { transform: scale(.97); }
.act:disabled { opacity: .6; cursor: default; }
.act.is-loading { opacity: .65; }

/* 预览区 */
.preview {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px; font-size: 13px; color: #111; overflow-x: auto;
}
.preview table { border-collapse: collapse; width: 100%; }
.preview td { border: 1px solid #000; padding: 5px 6px; vertical-align: top; }
.preview .ttl { text-align: center; font-size: 17px; font-weight: 400; margin-bottom: 6px; }
.preview .meta { text-align: right; font-size: 13px; margin-bottom: 8px; }
.preview .info p { margin: 3px 0; }
.preview .sign td { width: 16.6%; text-align: center; vertical-align: top; font-size: 12px; }
.preview .sign tr:nth-child(1) td { height: 30px; border-bottom: 0; }
.preview .sign tr:nth-child(2) td { height: 70px; border-top: 0; border-bottom: 0; }
.preview .sign tr:nth-child(3) td { height: 34px; border-top: 0; }
.preview .dt td { font-size: 11px; }
.preview .addr td { height: 40px; }
.preview .notes { font-size: 12px; margin-top: 8px; line-height: 1.7; }

/* 预览区语义说明（厘清预览 / 导出 / 下载） */
.preview-note { font-size: 12px; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 9px 12px; margin: 0 0 12px; line-height: 1.6; }
.preview-note b { color: #1e293b; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px);
  background: rgba(31,41,55,.94); color: #fff; padding: 10px 18px; border-radius: 22px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 50;
  max-width: 86%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 台账 */
.ledger-item {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ledger-item .li-main { min-width: 0; }
.ledger-item .li-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-item .li-time { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ledger-item a.li-open {
  color: #fff; background: var(--primary); text-decoration: none;
  padding: 7px 12px; border-radius: 8px; font-size: 13px; white-space: nowrap;
}
/* 台账操作组：载入 + 打开 */
.ledger-item .li-acts { display: flex; gap: 8px; flex-shrink: 0; }
.ledger-item .li-load {
  color: var(--primary); background: #fff; border: 1px solid var(--primary);
  padding: 7px 12px; border-radius: 8px; font-size: 13px; white-space: nowrap; cursor: pointer;
}

.hidden { display: none !important; }

/* 打印：仅显示预览区（已渲染为 canvas 的确认表），隐藏其余界面 */
@media print {
  /* 隐藏顶部栏、底部操作栏、提示、所有弹窗 */
  .appbar, .actionbar, .toast,
  .code-modal, .picker-modal, .draft-modal { display: none !important; }
  /* 隐藏除预览卡片外的其它卡片 */
  .container > .card:not(#secPreview) { display: none !important; }
  /* 强制显示预览卡片与预览容器（即使带 hidden 类也能打印） */
  #secPreview { display: block !important; }
  #previewBox, #previewCanvas { display: block !important; }
  /* 隐藏预览区内的按钮与提示文字，只留确认表内容 */
  #secPreview .card-head button, #previewHint, #btnPrint,
  #previewFallback, .preview-note { display: none !important; }
  #secLedger { display: none !important; }
  body { background: #fff; padding: 0; }
  .container { padding: 0; max-width: 100%; }
}
#printArea { display: none; }

/* 随机抽检按钮：放大、醒目、整行可点 */
.sample-btn {
  width: 100%;
  padding: 14px 16px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.sample-btn:active { transform: scale(.98); }

/* ---------- 检测项目自定义选择框 + 底部弹窗 ---------- */
.item-picker-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 12px;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.item-picker-trigger:active { background: #f8fafc; }
.item-picker-trigger.is-filled { color: var(--text); }
.item-picker-trigger.is-empty .item-picker-text { color: #9aa3af; }
.item-picker-trigger::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  margin-left: 10px;
  border-right: 2px solid #9aa3af;
  border-bottom: 2px solid #9aa3af;
  transform: rotate(45deg) translateY(-2px);
}
/* 保持与其它输入框底部对齐 */
.grid-2 .field > .item-picker-trigger { margin-top: auto; }

/* 遮罩 */
.picker-modal {
  position: fixed; inset: 0; z-index: 60;
  visibility: hidden; pointer-events: none;
}
.picker-modal.open { visibility: visible; pointer-events: auto; }
.picker-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .45);
  opacity: 0; transition: opacity .25s ease;
}
.picker-modal.open .picker-backdrop { opacity: 1; }

/* 底部动作面板 */
.picker-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff;
  border-radius: 18px 18px 0 0;
  max-width: 720px; margin: 0 auto;
  max-height: 78vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  box-shadow: 0 -6px 24px rgba(16, 24, 40, .18);
  padding-bottom: env(safe-area-inset-bottom);
}
.picker-modal.open .picker-sheet { transform: translateY(0); }

/* 顶部把手 */
.picker-handle {
  width: 38px; height: 4px; border-radius: 2px;
  background: #d6dce4; margin: 8px auto 2px;
}

/* 标题栏 */
.picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.picker-title { font-size: 16px; font-weight: 700; color: var(--text); }
.picker-close {
  border: none; background: #f1f5f9; color: var(--muted);
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 15px; line-height: 1; cursor: pointer;
}

/* 选项列表 */
.picker-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 12px; }
.picker-list { list-style: none; margin: 0; padding: 0; }
.picker-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px;
  font-size: 15px; color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background .12s;
}
.picker-list li:active { background: #f5f8fc; }
.picker-list li.selected { color: var(--primary); font-weight: 600; }
.picker-list li.selected::after {
  content: "✓";
  font-size: 17px; font-weight: 700; color: var(--primary);
}
.picker-list li:last-child { border-bottom: none; }

/* ---------- 查询码弹窗 ---------- */
.code-modal { position: fixed; inset: 0; z-index: 60; display: none; }
.code-modal.open { display: block; }
.code-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.code-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 16px 16px 0 0;
  padding: 6px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .25s ease;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, .18);
}
.code-modal.open .code-sheet { transform: translateY(0); }
.code-handle { width: 38px; height: 4px; border-radius: 2px; background: #d6dce4; margin: 8px auto 6px; }
.code-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 10px; border-bottom: 1px solid var(--border);
}
.code-title { font-size: 16px; font-weight: 700; color: var(--text); }
.code-close {
  border: none; background: #f1f5f9; color: var(--muted);
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.code-body { padding-top: 14px; }
.code-warn {
  font-size: 13px; line-height: 1.65; color: #b45309;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 10px; padding: 10px 12px; margin: 0 0 14px;
}
.code-box {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); border: 1px dashed var(--primary);
  border-radius: 12px; padding: 18px 12px; margin-bottom: 14px;
}
.code-actions {
  display: flex; gap: 10px; align-items: center;
}
.code-actions .primary-btn,
.code-actions .ghost-btn {
  flex: 1; padding: 11px 8px; font-size: 15px; font-weight: 600;
  border-radius: 9px; text-align: center;
}
/* 查询码二维码 */
.code-qr { display: flex; justify-content: center; margin: 0 0 8px; }
.code-qr svg { width: 148px; height: 148px; }
.code-qr-tip { text-align: center; font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.code-value {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 34px; font-weight: 700; letter-spacing: 6px; color: var(--primary-dark);
}
/* 暂存成功弹窗中的工程名称 */
.code-proj {
  text-align: center; font-size: 14px; font-weight: 600; color: var(--text);
  margin: 0 0 12px; word-break: break-all;
}

/* 暂存确认弹窗（覆盖保存 / 新开项目） */
.choice-modal { position: fixed; inset: 0; z-index: 65; display: none; }
.choice-modal.open { display: block; }
.choice-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.choice-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 16px 16px 0 0;
  padding: 6px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .25s ease;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, .18);
}
.choice-modal.open .choice-sheet { transform: translateY(0); }
.choice-handle { width: 38px; height: 4px; border-radius: 2px; background: #d6dce4; margin: 8px auto 6px; }
.choice-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 10px; border-bottom: 1px solid var(--border);
}
.choice-title { font-size: 16px; font-weight: 700; color: var(--text); }
.choice-close {
  border: none; background: #f1f5f9; color: var(--muted);
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.choice-body { padding-top: 14px; }
.choice-desc {
  font-size: 13px; line-height: 1.65; color: var(--text-sub);
  background: var(--primary-light); border: 1px solid var(--primary);
  border-radius: 10px; padding: 10px 12px; margin: 0 0 14px;
}
.choice-desc b { color: var(--primary-dark); font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; }
.choice-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.choice-actions .primary-btn,
.choice-actions .ghost-btn {
  padding: 12px 8px; font-size: 15px; font-weight: 600;
  border-radius: 9px; text-align: center;
}
.choice-actions .text-btn {
  padding: 8px; font-size: 14px; color: var(--muted);
  background: none; border: none; cursor: pointer;
}

/* 预览 PDF 懒加载：每页一个占位容器，滚动到附近才渲染 */
.preview-page-wrap { background: #fff; margin-bottom: 8px; border-radius: 4px; overflow: hidden; }
.preview-page-wrap.loading {
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 13px;
}
.preview-page-wrap.loading::after { content: '加载中…'; }
.preview-page { display: block; width: 100%; height: auto; }

/* ---------- 草稿箱弹窗 ---------- */
.draft-modal { position: fixed; inset: 0; z-index: 60; display: none; }
.draft-modal.open { display: block; }
.draft-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.draft-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 16px 16px 0 0;
  padding: 6px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .25s ease;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, .18);
  max-width: 720px; margin: 0 auto; max-height: 78vh; display: flex; flex-direction: column;
}
.draft-modal.open .draft-sheet { transform: translateY(0); }
.draft-handle { width: 38px; height: 4px; border-radius: 2px; background: #d6dce4; margin: 8px auto 6px; }
.draft-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 10px; border-bottom: 1px solid var(--border); }
.draft-title { font-size: 16px; font-weight: 700; color: var(--text); }
.draft-close { border: none; background: #f1f5f9; color: var(--muted); width: 30px; height: 30px; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; }
.draft-body { padding-top: 12px; overflow-y: auto; }
.draft-tip { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0 0 12px; }
.draft-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.draft-item .di-main { min-width: 0; }
.draft-item .di-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-item .di-time { font-size: 12px; color: var(--muted); margin-top: 2px; }
.draft-item .di-countdown { font-weight: 600; }
.draft-item .di-countdown.safe { color: var(--ok); }
.draft-item .di-countdown.warn { color: #f59e0b; }
.draft-item .di-countdown.urgent { color: var(--danger); }
.draft-item .di-acts { display: flex; gap: 8px; flex-shrink: 0; }
.draft-item .di-restore { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.draft-item .di-del { background: #fff; color: var(--danger); border: 1px solid #fecaca; border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; }

/* 随机抽检结果区：移动端隐藏，PC/投影端高亮展示 */
.sample-result { display: none; }

/* ===================== PC 端布局优化（≥900px 基础桌面） ===================== */
@media screen and (min-width: 900px) {
  body { font-size: 14px; }

  /* 顶部栏 */
  .appbar {
    padding: 14px 32px;
    box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 4px 18px rgba(16,24,40,.10);
  }
  .appbar-title { font-size: 18px; }
  .appbar-sub { font-size: 12px; }

  /* 容器：表单卡片居中，单栏 */
  .container {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 22px 32px 90px;
  }
  .container > section.card {
    margin-bottom: 18px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 页脚居中 */
  .container > footer { text-align: center; }

  /* 表单更紧凑 */
  .card { padding: 18px 20px; border-radius: 14px; }
  .card-title { font-size: 15px; }
  .field { margin-bottom: 10px; }
  .field > label { font-size: 12px; margin-bottom: 4px; }
  .grid-2 { gap: 14px; }
  input[type="text"], input[type="number"], input[type="date"], textarea, select {
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
  }
  textarea { min-height: 56px; }

  /* 预览区：居中，A4 纸张质感 */
  #secPreview { margin-left: auto; margin-right: auto; }
  #secPreview .preview {
    background: #fff;
    border: 1px solid #d9dde3;
    border-radius: 6px;
    box-shadow: 0 2px 0 #f0f1f3, 0 8px 28px rgba(16,24,40,.10);
    padding: 14px;
  }
  #secPreview #previewCanvas { min-height: 280px; }
  #secPreview .preview-note {
    font-size: 12px;
    line-height: 1.55;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    margin-top: 10px;
  }

  /* 随机抽检结果：基础桌面端展示 */
  .sample-result {
    display: block;
    margin-top: 14px;
    padding: 12px;
    background: #f8fafc;
    border: 1px dashed var(--border);
    border-radius: 10px;
  }
  .sample-result.has-result { background: #fff; border-style: solid; border-color: var(--primary-light); }
  .sample-result .sr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  .sample-result .sr-title { font-size: 13px; color: var(--muted); margin: 0; }
  .sample-result .sr-sort { display: flex; gap: 6px; }
  .sample-result .sort-btn {
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
  }
  .sample-result .sort-btn:hover { border-color: var(--primary); color: var(--primary); }
  .sample-result .sort-btn.is-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }
  .sample-result .sr-tags { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
  .sample-result .sr-tag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-width: 44px; padding: 4px 8px;
    background: var(--primary-light); color: var(--primary-dark);
    border-radius: 6px; font-size: 13px; font-weight: 600;
  }

  /* 底部操作栏 → 右侧悬浮垂直工具条 */
  .actionbar {
    left: auto;
    right: 22px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    max-width: none;
    flex-direction: column;
    align-items: center;
    border-radius: 18px;
    padding: 10px;
    gap: 8px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(230,235,242,.95);
    box-shadow: 0 14px 40px rgba(16,24,40,.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .act-row {
    flex-direction: column;
    width: auto;
    gap: 6px;
  }
  .act {
    flex: 0 0 auto;
    width: 64px;
    padding: 10px 4px;
    border-radius: 12px;
    font-size: 11px;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    transition: transform .15s, box-shadow .15s, border-color .15s;
  }
  .act:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16,24,40,.10);
    border-color: var(--primary);
  }
  .act .act-ico { width: 22px; height: 22px; }
  .act .act-ico svg { width: 22px; height: 22px; }
  .act.main {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }
  .act.main:hover:not(:disabled) { background: var(--primary-dark); }
  .save-status {
    left: auto; right: 22px; top: 16px; bottom: auto;
    transform: none;
    width: auto; max-width: 260px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.35;
    border-radius: 10px;
    text-align: right;
  }

  /* 弹窗居中：覆盖手机端底部贴边样式 */
  .code-sheet,
  .choice-sheet,
  .draft-sheet {
    top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%) scale(.96);
    width: calc(100% - 48px);
    border-radius: 16px;
    padding: 14px 22px 22px;
    opacity: 0;
    transition: opacity .2s ease, transform .24s cubic-bezier(.22, .61, .36, 1);
  }
  .code-modal.open .code-sheet,
  .choice-modal.open .choice-sheet,
  .draft-modal.open .draft-sheet {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  .code-sheet { max-width: 460px; }
  .choice-sheet { max-width: 460px; padding: 14px 22px 18px; }
  .draft-sheet { max-width: 540px; max-height: 80vh; }
  .code-handle, .choice-handle, .draft-handle { display: none; }
  .code-header, .choice-header, .draft-header { padding: 2px 0 12px; }
  .code-title, .choice-title, .draft-title { font-size: 17px; }
}

/* ===================== 大屏/投影模式（≥1200px） ===================== */
@media screen and (min-width: 1200px) {
  body { font-size: 16px; }

  /* 表单区进一步放宽居中 */
  .container {
    max-width: 980px;
    padding: 28px 40px 110px;
  }
  .container > section.card { margin-bottom: 22px; }

  /* 顶部栏更高挑，标题更大 */
  .appbar { padding: 18px 40px; }
  .appbar-title { font-size: 22px; }
  .appbar-sub { font-size: 14px; }
  .appbar-status { font-size: 13px; padding: 3px 12px; }

  /* 卡片更大 */
  .card { padding: 24px; border-radius: 16px; }
  .card-title { font-size: 18px; }
  .card-title::before { width: 5px; height: 20px; }
  .field { margin-bottom: 14px; }
  .field > label { font-size: 14px; margin-bottom: 6px; }
  .grid-2 { gap: 18px; }
  input[type="text"], input[type="number"], input[type="date"], textarea, select {
    padding: 13px 14px;
    font-size: 16px;
    border-radius: 10px;
  }
  textarea { min-height: 76px; }
  .hint { font-size: 14px; }
  .primary-btn { padding: 12px 18px; font-size: 15px; }
  .sample summary { font-size: 15px; }
  .sample-btn { padding: 12px 20px; font-size: 15px; }

  /* 预览区更大 */
  #secPreview .preview { padding: 18px; min-height: 360px; }
  #secPreview #previewCanvas { min-height: 340px; }
  #secPreview .preview-note { font-size: 13px; padding: 12px 14px; }

  /* 随机抽检结果：投影大字 */
  .sample-result {
    margin-top: 18px;
    padding: 18px;
    border-radius: 14px;
    border-width: 2px;
  }
  .sample-result .sr-head { margin-bottom: 14px; }
  .sample-result .sr-title {
    font-size: 16px;
    color: var(--text);
    margin: 0;
    font-weight: 600;
  }
  .sample-result .sr-sort { gap: 8px; }
  .sample-result .sort-btn {
    padding: 5px 12px;
    font-size: 14px;
    border-radius: 8px;
  }
  .sample-result .sr-tags { grid-template-columns: repeat(10, 1fr); gap: 10px; }
  .sample-result .sr-tag {
    width: 100%; min-width: 64px;
    padding: 8px 14px;
    font-size: 20px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(45,108,223,.25);
  }

  /* 右侧悬浮工具条更大 */
  .actionbar {
    right: 28px;
    padding: 14px;
    gap: 10px;
    border-radius: 22px;
  }
  .act-row { gap: 8px; }
  .act {
    width: 78px;
    padding: 14px 6px;
    border-radius: 14px;
    font-size: 13px;
    gap: 6px;
  }
  .act .act-ico { width: 26px; height: 26px; }
  .act .act-ico svg { width: 26px; height: 26px; }
  .save-status { font-size: 12px; padding: 8px 10px; }
}

/* 超宽屏进一步放宽 */
@media screen and (min-width: 1600px) {
  .container { max-width: 1100px; }
  .sample-result .sr-tag { font-size: 22px; padding: 10px 16px; }
  .actionbar { right: 48px; }
}
  .sample-result .sr-tag { font-size: 22px; padding: 10px 16px; }
}
