:root {
  --bg: #f4f7f8;
  --card: rgba(255, 255, 255, 0.85);
  --text: #18312c;
  --muted: #6f7f7b;
  --brand: #1f6b5c;
  --brand-dark: #154d42;
  --border: rgba(31, 107, 92, 0.12);
}

body {
  background: linear-gradient(180deg, #f7f9fa 0%, #edf3f1 100%);
  color: var(--text);
  font-family: "Noto Sans Thai", system-ui, -apple-system, sans-serif;
}

.topbar {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.glass-card, .summary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(20, 54, 48, 0.08);
  backdrop-filter: blur(10px);
}

.summary-card {
  padding: 1.25rem;
  min-height: 130px;
}

.summary-card .label {
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: .5rem;
}

.summary-card .value {
  font-size: 2rem;
  font-weight: 700;
}

.btn-brand {
  background: var(--brand);
  color: white;
  border: none;
}

.btn-brand:hover {
  background: var(--brand-dark);
  color: white;
}

.table thead th {
  color: var(--muted);
  font-weight: 600;
  border-bottom-width: 1px;
}

.form-control, .form-select {
  border-radius: 14px;
  padding: .7rem .95rem;
}

@media (max-width: 768px) {
  #map { height: 420px !important; }
  .summary-card .value { font-size: 1.6rem; }
}