* { box-sizing: border-box; }
.group-bar { margin:0 0 8px; }
.group-bar > label { margin-right:6px; font-size:13px; color:var(--muted); }
.group-bar > select {
  padding:5px 8px; border:1px solid var(--line); border-radius:6px;
  font:inherit; background:#fff; min-width:190px;
}
.group-bar > select:disabled { color:var(--muted); background:#f5f5f5; }
.group-bar > .note { display:inline; margin-left:8px; }
:root { --line:#d9dee3; --bg:#f2f4f7; --card:#fff; --main:#1565a8; --text:#24303a;
  --muted:#6b7783; --ok:#1a7f43; --warn:#a35c00; --err:#c62828; }

body { margin:0; padding:0 0 40px; background:var(--bg); color:var(--text);
  font:14px/1.6 "Microsoft YaHei","PingFang SC","Segoe UI",sans-serif; }
header { position:sticky; top:0; z-index:20; background:var(--main); color:#fff; padding:16px 22px; box-shadow:0 2px 6px rgba(0,0,0,.12); }
header h1 { margin:0; font-size:18px; font-weight:600; }
header p { margin:4px 0 0; font-size:12px; opacity:.85; }
main { max-width:1040px; margin:18px auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 18px; margin-bottom:14px; }
.card > h2 { margin:0 0 10px; font-size:14px; font-weight:600; color:var(--main);
  border-left:3px solid var(--main); padding-left:8px; }
.split { display:flex; gap:14px; align-items:flex-start; }
.split > .card:first-child { flex:1 1 auto; min-width:0; }
.split > .card:last-child { flex:0 0 200px; }

.radios { display:flex; flex-wrap:wrap; gap:18px; }
.radio { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.radio input { margin:0; cursor:pointer; }
.type-wrap { display:flex; gap:26px; flex-wrap:wrap; }
.type-wrap > div { flex:1 1 260px; }
.type-wrap .label { font-size:12px; color:var(--muted); margin-bottom:4px; }

.row { display:flex; align-items:center; gap:10px; padding:4px 0; }
.row > label { flex:0 0 200px; text-align:right; color:var(--muted); }
.row > label.req { color:var(--text); }
.row > input { flex:0 0 200px; padding:5px 8px; border:1px solid var(--line); border-radius:4px; font:inherit; }
.row > input:read-only { background:#f6f8fa; color:var(--muted); }
.row > input:focus { outline:none; border-color:var(--main); box-shadow:0 0 0 2px rgba(21,101,168,.15); }
.row > input.bad { border-color:var(--err); background:#fff5f5; }
.row.disabled { opacity:.5; }
.side { font-size:12px; color:var(--muted); }
.side.ok { color:var(--ok); }
.side.err { color:var(--err); font-weight:600; }
.side.warn { color:var(--warn); }
.side.info { color:var(--main); }

.date-row { display:flex; gap:16px; align-items:center; padding:4px 0; }
.date-row input { width:70px; padding:5px 8px; border:1px solid var(--line); border-radius:4px; font:inherit; }
.date-row .unit { color:var(--muted); font-size:12px; }

.hint { font-size:12px; }
.hint.ok { color:var(--ok); }
.hint.warn { color:var(--warn); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.chip { font-size:12px; padding:3px 9px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:#fafbfc; }
.chip.ok { color:var(--ok); border-color:#b7e0c6; background:#f2fbf5; }
.chip.active { border-color:var(--main); color:var(--main); font-weight:600; }

button { font:inherit; cursor:pointer; }
.btn { padding:7px 16px; border:1px solid var(--line); background:#fff; border-radius:4px; }
.btn:hover { border-color:var(--main); color:var(--main); }
.btn.primary { background:var(--main); border-color:var(--main); color:#fff; font-weight:600; }
.btn.primary:hover { background:#12558f; color:#fff; }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; }

.presets { display:flex; flex-direction:column; gap:6px; }
.preset { padding:6px 10px; border:1px solid var(--line); background:#fff; border-radius:4px; text-align:left; }
.preset:hover:enabled { border-color:var(--main); color:var(--main); }
.preset:disabled { color:#aab2ba; background:#fafbfc; cursor:not-allowed; }

table.setting { border-collapse:collapse; width:100%; font-size:13px; }
table.setting th, table.setting td { border:1px solid var(--line); padding:5px 8px; text-align:left; }
table.setting th { background:#f6f8fa; white-space:nowrap; color:var(--muted); font-weight:600; }
table.setting input { width:100%; padding:4px 6px; border:1px solid var(--line); border-radius:4px; font:inherit; }
dialog { border:none; border-radius:8px; padding:0; box-shadow:0 10px 30px rgba(0,0,0,.2); min-width:520px; }
dialog .body { padding:16px 18px; }
dialog h3 { margin:0 0 12px; font-size:15px; color:var(--main); }
dialog .foot { display:flex; justify-content:flex-end; gap:10px; padding:10px 18px 16px; }

.note { color:var(--muted); font-size:12px; margin:6px 0 0; }
.note.warn { color:var(--warn); }
.filename { font-family:Consolas,Monaco,monospace; background:#f6f8fa; padding:2px 6px; border-radius:4px; }

/* ---------- 响应式：手机 / 平板自适应 ---------- */
@media (max-width: 720px) {
  header { padding:14px 16px; }
  header h1 { font-size:16px; }
  main { padding:0 12px; margin:14px auto; }
  .card { padding:12px 14px; }

  /* 手机上：左右两栏改为上下堆叠，且“常用村庄”移到“材料参数”上方 */
  .split { flex-direction:column; }
  .split > .card:first-child { flex:1 1 auto; min-width:0; order:2; }   /* 材料参数 */
  .split > .card:last-child { flex:1 1 auto; min-width:0; order:1; }    /* 常用村庄 */

  /* 每行“标签 + 输入框”改为纵向排列、占满宽度 */
  .row { flex-direction:column; align-items:stretch; gap:4px; }
  .row > label { flex:none; text-align:left; }
  .row > input { flex:1 1 auto; width:100%; min-width:0; }

  .group-bar { display:flex; flex-wrap:wrap; align-items:center; }
  .group-bar > select { width:100%; min-width:0; }
  .group-bar > .note { margin-left:0; }

  .date-row { flex-wrap:wrap; }
  .type-wrap > div { flex:1 1 100%; }

  /* 常用村庄按钮：手机上变小、横向自动换行，不占满整行，省空间 */
  .presets { flex-direction:row; flex-wrap:wrap; gap:6px; }
  .preset { flex:0 0 auto; padding:4px 10px; font-size:13px; }
}

@media (max-width: 380px) {
  body { font-size:13px; }
  header h1 { font-size:15px; }
}