:root {
  --brand: #e53935;
  --brand-hover: #c62828;
  --text: #1f2937;
  --muted: #6b7280;
  --bg: #f7f7f9;
  --card: #ffffff;
  --border: #e5e7eb;
  --shadow: 0 12px 28px rgba(0,0,0,.08);
}

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3 {
  font-family: 'Montserrat', 'Ubuntu', sans-serif;
  color: #111;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--muted); }

[hidden] { display: none !important; }

.btn {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  letter-spacing: .2px;
}
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.danger { border-color:#e0b4b4; background:#ffecec; color:#b30000 }

input, select {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-sizing: border-box;
  background: #fff;
}
input:focus, select:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(229,57,53,.15) }

table { width: 100%; border-collapse: collapse; margin-top: 14px; background:#fff; border:1px solid var(--border); border-radius: 10px; overflow:hidden }
th, td { border-bottom: 1px solid var(--border); padding: 10px; text-align: left; }
th { background: #fafafa; font-weight: 700; }

.nav { font-size: 13px; color:#333; }
.nav a { font-weight: 700; }
.nav-sub { margin-top: 4px; font-size: 12px; }
.card { background: var(--card); border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); }

/* Small helpers */
.wrap { max-width: 1000px; margin: 24px auto; padding: 0 16px; }
/* Header title on map panel */
.title { font-size: 24px; font-weight:800; letter-spacing:.2px; margin:0 0 6px 0 }