:root{
  --bg:#f5f7fb; --fg:#222; --card:#fff; --muted:#667085;
  --pri:#2c7a7b; --pri-700:#285e61; --acc:#f59e0b; --line:#e5e7eb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  background:var(--bg); color:var(--fg);
}

.container{max-width:1200px;margin:0 auto;padding:16px}
header{text-align:center;padding:12px 0 0}
header h1{margin:8px 0 4px; font-size:clamp(22px,2.4vw,30px); color:var(--pri)}
header p{margin:4px 0 8px; color:var(--muted)}
.badges{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.badge{background:#e6fffa;color:#0f766e;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid #b2f5ea}

.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:16px; box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.card h2{margin:0 0 12px}
.card.stretch{grid-column: span 12}
.grid > .card:nth-child(1){grid-column: span 6}
.grid > .card:nth-child(2){grid-column: span 6}
.grid > .card:nth-child(3){grid-column: span 6}
.grid > .card:nth-child(4){grid-column: span 6}

@media (max-width: 900px){
  .grid > .card{grid-column: span 12 !important}
}

label{font-weight:600;display:block;margin-top:10px}
input,button{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #d1d5db;
  outline:none; font-size:15px; transition:.2s border-color, .2s box-shadow;
}
input:focus{border-color:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.25)}
button{cursor:pointer}
.primary{background:var(--pri); color:#fff; border-color:var(--pri)}
.primary:hover{background:var(--pri-700)}
.secondary{background:#eef2ff; border-color:#c7d2fe}
.secondary:hover{background:#e0e7ff}
.outline{background:#fff;border-color:#94a3b8}
.outline:hover{background:#f8fafc}

.row{display:flex; gap:12px}
.col{flex:1}
small{color:var(--muted)}
fieldset.geo{border:1px dashed #cbd5e1; border-radius:12px; padding:10px; margin-top:10px}
legend{color:#475569; font-weight:600}

.list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.item{
  border:1px solid var(--line); border-radius:12px; padding:12px; background:#fafafa;
  display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center;
}
.item h3{margin:0}
.item .meta{font-size:13px; color:var(--muted)}
.item .actions{display:flex; gap:8px}
.tag{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background:#f1f5f9; border:1px solid #e2e8f0; margin-right:6px}

#map{width:100%; height:380px; border-radius:16px; border:1px solid var(--line); overflow:hidden}
.impact{margin-bottom:10px}
.impact-stats{display:flex; gap:16px; flex-wrap:wrap}
.impact-stats div{background:#f8fafc; border:1px solid var(--line); border-radius:14px; padding:10px 16px; min-width:150px}
.impact-stats strong{font-size:22px; display:block}

details summary{cursor:pointer; font-weight:600; margin:6px 0}
details form{margin-top:8px}

/* Toasts */
#toastContainer{position:fixed; top:16px; right:16px; display:flex; flex-direction:column; gap:8px; z-index:9999}
.toast{
  background:#111827; color:#fff; padding:10px 12px; border-radius:10px; box-shadow:0 10px 20px rgba(0,0,0,.2);
  display:flex; align-items:center; gap:8px; max-width:320px;
}
.toast .pill{background:#22c55e; padding:2px 8px; border-radius:999px; font-size:12px}
.toast.warn .pill{background:#f59e0b}
.toast.error .pill{background:#ef4444}

/* Footer */
footer{color:var(--muted); text-align:center; padding:20px 0}
footer .muted{color:var(--muted)}