:root {
  --paper: #f4efe6; --surface: #fffdf8; --ink: #243230; --muted: #7b8a86;
  --accent: #2f6f75; --hairline: rgba(35, 48, 47, .12);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  padding: 18px 14px 40px;
}
header h1 { font-size: 20px; margin: 4px 0 6px; }
header p { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.card {
  background: var(--surface); border-radius: 16px; padding: 14px;
  box-shadow: 0 8px 28px rgba(30, 45, 44, .08); margin-bottom: 14px;
}
.file { display: block; padding: 10px 12px; border: 1px dashed var(--hairline); border-radius: 12px; margin-bottom: 10px; }
.file span { display: block; font-size: 13px; font-weight: 600; }
.file small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.file input { margin-top: 6px; font-size: 12px; }
.row { display: flex; gap: 10px; margin-top: 4px; }
button {
  flex: 1; border: none; border-radius: 12px; padding: 11px 14px; font-size: 14px;
  background: var(--accent); color: #fff; font-weight: 600;
}
button:disabled { opacity: .45; }
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.hint { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.6; }
.preview-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; }
.preview-head span { color: var(--muted); font-size: 12px; }
.table-wrap { overflow: auto; max-height: 60vh; border: 1px solid var(--hairline); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th, td { border-bottom: 1px solid var(--hairline); padding: 7px 8px; text-align: left; vertical-align: top; }
th { position: sticky; top: 0; background: #f7f2e8; font-weight: 600; white-space: nowrap; }
td.num { width: 48px; color: var(--muted); }
td.road { width: 64px; }
td.job { width: 80px; }