:root { color-scheme: light; --ink:#1e293b; --muted:#64748b; --line:#d7dee8; --soft:#f4f7fb; --brand:#0f766e; --accent:#b45309; --bad:#b91c1c; --ok:#047857; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif; color:var(--ink); background:#eef3f7; }
header { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; background:#ffffff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; }
header strong { font-size:18px; margin-right:10px; }
header span, .muted { color:var(--muted); }
nav { display:flex; gap:8px; flex-wrap:wrap; }
nav a, a { color:#0f766e; text-decoration:none; }
main { width:min(1180px, calc(100% - 28px)); margin:22px auto 54px; }
section { margin:18px 0; }
h1 { font-size:28px; margin:0 0 16px; }
h2 { font-size:20px; margin:0 0 14px; }
.hero { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; }
.panel, .scan-card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:22px; }
.metrics { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.metric { background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px; text-decoration:none; color:inherit; display:block; transition:box-shadow .15s; }
.metric:hover { box-shadow:0 4px 12px rgba(15,23,42,.08); }
.metric b { display:block; font-size:30px; color:var(--brand); }
.metric span { color:var(--muted); }
.section-title { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.batch-board { margin-top:18px; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:0 8px 24px rgba(15, 23, 42, .05); }
.batch-title { padding:16px 18px; background:#f8fafc; border-bottom:1px solid var(--line); }
.batch-title h2 { margin-bottom:2px; }
.batch-title p { margin:4px 0 0; }
.block { display:block; margin-top:4px; font-size:13px; }
.filter-panel { padding:16px 18px; }
.filter-form { display:grid; grid-template-columns:minmax(240px, 1.8fr) repeat(4, minmax(145px, 1fr)); gap:12px; align-items:end; }
.filter-form label { font-size:14px; }
.filter-actions { display:flex; flex-wrap:wrap; gap:8px; grid-column:1 / -1; }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); }
.pagination div { display:flex; flex-wrap:wrap; gap:6px; }
.page-link { min-width:34px; min-height:34px; display:inline-flex; align-items:center; justify-content:center; padding:5px 9px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.page-link.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.status-pill { display:inline-flex; align-items:center; min-height:24px; padding:2px 8px; border-radius:999px; background:#e0f2fe; color:#075985; font-size:13px; font-weight:700; }
.status-created { background:#f1f5f9; color:#475569; }
.status-departed { background:#ccfbf1; color:#115e59; }
.status-transited { background:#e0f2fe; color:#075985; }
.status-signed { background:#dcfce7; color:#166534; }
tr.changed td { background:#fffbeb; }
.board-table { border:0; border-radius:0; }
.board-table th { white-space:nowrap; }
.board-table td { line-height:1.45; }
.transport-cell b { color:#0f766e; }
.location-cell { min-width:220px; font-weight:700; color:#334155; }
.nowrap { white-space:nowrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 14px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); cursor:pointer; font:inherit; }
.button.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.button.small { min-height:30px; padding:5px 10px; font-size:14px; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#f8fafc; color:#334155; font-weight:700; }
tr:last-child td { border-bottom:0; }
.empty { color:var(--muted); text-align:center; padding:22px; }
.form { display:grid; gap:14px; max-width:680px; }
label { display:grid; gap:6px; font-weight:700; }
input, textarea, select { width:100%; border:1px solid #cbd5e1; border-radius:6px; padding:10px 11px; font:inherit; background:#fff; }
.notice { border-radius:6px; padding:11px 12px; margin:12px 0; }
.notice.ok { background:#ecfdf5; color:var(--ok); border:1px solid #a7f3d0; }
.notice.error { background:#fef2f2; color:var(--bad); border:1px solid #fecaca; }
.detail-grid { display:grid; grid-template-columns:minmax(0, 1fr) 260px; gap:16px; align-items:start; }
dl { display:grid; grid-template-columns:110px minmax(0, 1fr); gap:10px 14px; margin:0; }
dt { color:var(--muted); }
dd { margin:0; overflow-wrap:anywhere; }
.qr-panel { text-align:center; }
.qr-panel img { max-width:100%; }
.timeline { display:grid; gap:12px; }
.timeline-item { background:#fff; border-left:4px solid var(--brand); padding:12px 14px; border-radius:6px; }
.timeline-item.changed { border-left-color:var(--accent); background:#fffbeb; }
.timeline-item span { display:block; color:var(--muted); margin-top:3px; }
.changed-badge { display:inline-block; margin-left:8px; padding:2px 7px; border-radius:999px; color:#92400e; background:#fef3c7; font-style:normal; font-size:12px; }
.changed-badge.admin { color:#0f766e; background:#ccfbf1; }
.change-detail { margin-top:10px; padding:10px; border:1px solid #fbbf24; border-radius:6px; background:#fff7ed; }
.change-detail dl { grid-template-columns:72px minmax(0, 1fr); margin-top:8px; }
.scan-card { max-width:760px; margin-left:auto; margin-right:auto; }
.success-card { text-align:center; border-color:#86efac; background:#f0fdf4; }
.remark { border-left-color:var(--accent); background:#fff7ed; }
.remark p { margin:6px 0 0; }
.scan-actions { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:16px 0; }
.action-button { min-height:46px; font-weight:700; }
.correction-box { display:grid; gap:6px; padding-top:12px; margin-top:12px; border-top:1px solid var(--line); }
.button.ghost { background:#f8fafc; }
.hidden { display:none !important; }
.form-title { font-size:18px; font-weight:700; margin-top:6px; }
.verify-fields { display:grid; gap:12px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; }
.address-section, .previous-detail { display:grid; gap:10px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; }
.address-section b, .previous-detail b { color:#334155; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.previous-detail dl { grid-template-columns:88px minmax(0, 1fr); }
.privacy { color:var(--muted); font-size:14px; margin:0; }
.scan-timeline { margin:0; padding-left:22px; }
.scan-timeline li { margin:10px 0; }
.scan-timeline li.changed { background:#fffbeb; border-radius:6px; padding:6px; }
.scan-timeline span, .scan-timeline em { color:var(--muted); margin-left:8px; font-style:normal; }
.scan-timeline strong { margin-left:8px; color:#92400e; font-size:12px; }
.labels { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.label { background:#fff; border:1px dashed #94a3b8; padding:10px; display:grid; grid-template-columns:130px minmax(0, 1fr); grid-template-rows:auto 1fr; gap:4px 10px; align-items:start; break-inside:avoid; box-sizing:border-box; overflow:hidden; }
.label img { width:130px; height:130px; max-width:none; grid-row:1 / span 2; align-self:center; }
.label h2 { margin:0; font-size:20px; line-height:1.2; font-weight:900; overflow-wrap:anywhere; word-break:break-word; }
.label-info { min-width:0; align-self:center; }
.label p { margin:3px 0; font-size:13px; line-height:1.35; overflow-wrap:anywhere; word-break:break-word; }
.label-note { font-weight:700; color:#92400e; }
.print-actions { text-align:right; }
@media (max-width: 780px) {
  header, .hero, .section-title { align-items:flex-start; flex-direction:column; }
  .metrics, .detail-grid { grid-template-columns:1fr; }
  .filter-form { grid-template-columns:1fr; }
  .filter-actions { grid-column:auto; }
  .pagination { align-items:flex-start; flex-direction:column; }
  main { width:min(100% - 18px, 1180px); }
  th, td { font-size:14px; padding:9px; }
  dl { grid-template-columns:88px minmax(0, 1fr); }
  .scan-actions { grid-template-columns:1fr; }
  .labels { grid-template-columns:1fr; }
  .label { grid-template-columns:200px 1fr; padding:16px; min-height:auto; }
  .label img { width:200px; height:200px; }
  .label h2 { font-size:22px; }
  .label p { font-size:15px; }
}
@media print {
  header, .print-actions { display:none; }
  html, body { width:210mm; margin:0; padding:0; background:#fff; }
  main { width:210mm; max-width:none; margin:0; padding:0; }
  section { margin:0; }
  .labels { width:210mm; display:grid; grid-template-columns:repeat(2, 105mm); grid-auto-rows:74.25mm; gap:0; }
  .label { width:105mm; height:74.25mm; border:0.3mm dashed #555; padding:5mm; grid-template-columns:54mm minmax(0, 1fr); grid-template-rows:auto 1fr; gap:1mm 4mm; break-inside:avoid; page-break-inside:avoid; }
  .label:nth-child(8n) { break-after:page; page-break-after:always; }
  .label img { width:54mm; height:54mm; grid-row:1 / span 2; align-self:center; }
  .label h2 { font-size:14pt; line-height:1.15; }
  .label p { margin:1.5mm 0; font-size:9pt; line-height:1.25; }
  .label-note { font-size:8pt !important; }
  @page { margin:0; size:A4 portrait; }
}
/* ── 数据可视化图表 ────────────── */
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.chart-card-wide { grid-column:1 / -1; }
.chart-card h2 { font-size:16px; margin:0 0 14px; color:#334155; }
.chart-body { display:flex; align-items:center; justify-content:center; min-height:170px; }
.donut-wrap { flex-direction:column; gap:10px; }
.donut-chart { width:200px; height:180px; }
.donut-total { font-size:22px; font-weight:800; fill:#1e293b; }
.donut-label { font-size:12px; fill:#64748b; }
.chart-legend { display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center; }
.legend-item { display:flex; align-items:center; gap:5px; font-size:13px; color:#475569; }
.legend-swatch { display:inline-block; width:11px; height:11px; border-radius:3px; }
.legend-item b { color:#1e293b; }
.legend-item small { color:#94a3b8; }
.bar-chart { width:100%; display:grid; gap:10px; padding:8px 0; }
.bar-row { display:grid; grid-template-columns:80px 1fr 32px; gap:8px; align-items:center; }
.bar-label { font-size:13px; color:#475569; text-align:right; white-space:nowrap; }
.bar-track { height:18px; background:#e2e8f0; border-radius:9px; overflow:hidden; display:block; }
.bar-fill { display:block; height:100%; background:var(--brand); border-radius:9px; transition:width .6s; }
.bar-value { font-size:14px; font-weight:700; color:#1e293b; }
.trend-wrap { overflow-x:auto; padding:8px 0; }
.trend-chart { width:100%; max-width:520px; }
.trend-line { fill:none; stroke:var(--brand); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.ax { font-size:11px; }
.ax-label { fill:#94a3b8; }
.ax-grid { stroke:#e2e8f0; stroke-width:0.8; stroke-dasharray:4 3; }
.chart-empty { color:#94a3b8; font-size:14px; padding:32px; }
@media (max-width: 780px) { .charts-grid { grid-template-columns:1fr; } .chart-card-wide { grid-column:auto; } .bar-label { font-size:11px; } }
tr:hover td { background: #f1f5f9; }
.page-jump { width: 52px; text-align: center; padding: 6px 4px; }