* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #f4f7f4; color: #2d2d2d; padding: 20px 16px 40px; }
h2 { font-size: 1.35em; color: #2c5f2e; font-weight: 700; margin-bottom: 5px; }
.subtitle { color: #666; font-size: 0.87em; margin-bottom: 16px; }

.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.topbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.sync-info { font-size:0.78em; color:#777; }
.sync-info.stale { color:#c0392b; font-weight:600; }

.edit-btn { padding:6px 14px; border-radius:5px; border:1px solid #2c5f2e; background:#fff; color:#2c5f2e; font-size:0.8em; font-weight:600; cursor:pointer; }
.edit-btn.active { background:#2c5f2e; color:#fff; }
.edit-indicator { display:none; background:#fff3cd; border:1px solid #ffc107; color:#856404; padding:6px 14px; border-radius:5px; font-size:0.8em; font-weight:600; }
.edit-indicator.show { display:inline-block; }

.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:999; align-items:center; justify-content:center; }
.modal-bg.show { display:flex; }
.modal { background:#fff; border-radius:10px; padding:28px 28px 24px; width:320px; box-shadow:0 8px 32px rgba(0,0,0,0.18); }
.modal h3 { font-size:1.05em; color:#2c5f2e; margin-bottom:14px; }
.modal input { width:100%; padding:9px 12px; border:1px solid #ccc; border-radius:5px; font-size:0.95em; margin-bottom:10px; }
.modal input:focus { outline:none; border-color:#2c5f2e; }
.modal .err { color:#c0392b; font-size:0.82em; min-height:18px; margin-bottom:8px; }
.modal-btns { display:flex; gap:8px; justify-content:flex-end; }
.modal-btns button { padding:7px 18px; border-radius:5px; border:none; font-size:0.88em; font-weight:600; cursor:pointer; }
.btn-cancel { background:#f0f0f0; color:#555; }
.btn-ok { background:#2c5f2e; color:#fff; }

.tabs { display:flex; gap:4px; border-bottom:2px solid #2c5f2e; flex-wrap:wrap; }
.tab { padding:8px 18px; background:#e8f0e8; border:1px solid #cde0cd; border-bottom:none; border-radius:6px 6px 0 0; cursor:pointer; font-size:0.85em; font-weight:600; color:#2c5f2e; }
.tab.active { background:#2c5f2e; color:#fff; border-color:#2c5f2e; }

.pane { display:none; }
.pane.active { display:block; }

.toolbar { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#fff; border:1px solid #dde8dd; border-top:none; flex-wrap:wrap; }
.toolbar input { padding:6px 10px; border:1px solid #ccc; border-radius:4px; font-size:0.84em; width:220px; }
.toolbar input:focus { outline:none; border-color:#2c5f2e; }
.fbtn { padding:5px 13px; border-radius:14px; border:1px solid #888; background:#fff; font-size:0.79em; cursor:pointer; font-weight:600; color:#555; }
.fbtn.f-all.on { background:#555; color:#fff; }
.fbtn.f-have { border-color:#2c5f2e; color:#2c5f2e; }
.fbtn.f-have.on { background:#2c5f2e; color:#fff; }
.fbtn.f-none { border-color:#c0392b; color:#c0392b; }
.fbtn.f-none.on { background:#c0392b; color:#fff; }
.cnt { margin-left:auto; font-size:0.78em; color:#999; }

table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #dde8dd; border-top:none; font-size:0.84em; }
thead tr { background:#2c5f2e; color:#fff; }
th { padding:9px 10px; text-align:left; font-weight:600; white-space:nowrap; }
tbody tr { border-bottom:1px solid #eef3ee; }
tbody tr:hover { background:#f0f8f0; }
tbody tr.hide { display:none; }
td { padding:8px 10px; vertical-align:middle; }
td.num { color:#ccc; font-size:0.8em; }
td.lat { font-style:italic; color:#3a5a3a; font-weight:500; }
td.grey { color:#666; }

.badge { display:inline-block; padding:3px 11px; border-radius:11px; font-size:0.8em; font-weight:700; user-select:none; }
.badge.t { background:#e6f4e6; color:#1e7b1e; border:1px solid #a8d5a8; }
.badge.n { background:#fdecea; color:#c0392b; border:1px solid #f5b7b1; }

.form-badge { display:inline-block; padding:2px 8px; border-radius:4px; background:#e8f0e8; color:#2c5f2e; font-size:0.78em; font-weight:600; }
.form-badge.empty { background:#f5f5f5; color:#bbb; font-style:italic; }

/* Editable manual fields */
.edit-cell { cursor:pointer; border-radius:4px; padding:2px 4px; }
.edit-cell:hover { box-shadow:0 0 0 2px #2c5f2e44; }
.edit-cell::after { content:' ✎'; font-size:0.85em; opacity:0.5; }
.edit-cell.saving { opacity:0.45; }
.edit-cell.failed { box-shadow:0 0 0 2px #c0392b; }
.edit-input { width:100%; padding:3px 6px; border:1px solid #2c5f2e; border-radius:4px; font-size:0.95em; font-family:inherit; }
.edit-input:focus { outline:none; }

.summary { display:flex; gap:16px; padding:8px 12px; background:#f0f8f0; border:1px solid #dde8dd; border-top:none; font-size:0.81em; color:#555; flex-wrap:wrap; margin-bottom:2px; }
.summary .red { color:#c0392b; }

.nores { display:none; padding:24px; text-align:center; color:#bbb; background:#fff; border:1px solid #dde8dd; border-top:none; }
.loading { padding:40px; text-align:center; color:#999; }
.load-error { display:none; padding:20px; margin-top:12px; background:#fdecea; border:1px solid #f5b7b1; color:#c0392b; border-radius:6px; font-size:0.88em; }
.load-error.show { display:block; }

@media(max-width:600px){
  .pane[data-tab="MT"] th:nth-child(4), .pane[data-tab="MT"] td:nth-child(4),
  .pane[data-tab="MT"] th:nth-child(5), .pane[data-tab="MT"] td:nth-child(5),
  .pane[data-tab="MG"] th:nth-child(4), .pane[data-tab="MG"] td:nth-child(4),
  .pane[data-tab="MG"] th:nth-child(5), .pane[data-tab="MG"] td:nth-child(5),
  .pane[data-tab="HE"] th:nth-child(4), .pane[data-tab="HE"] td:nth-child(4),
  .pane[data-tab="HE"] th:nth-child(5), .pane[data-tab="HE"] td:nth-child(5) { display:none }
  .toolbar input { width:100% }
}