:root{
  --green:#2e7d32; --green-d:#1b5e20; --green-l:#e8f5e9;
  --ink:#1c2620; --muted:#5b665f; --line:#dbe3dd; --bg:#fbfdfb;
  --low:#2e7d32; --mod:#e08e00; --high:#c62828;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Times New Roman',Times,serif;
  color:var(--ink);background:var(--bg);display:flex;flex-direction:column}

header{background:var(--green-d);color:#fff;padding:.9rem 1.2rem}
header h1{margin:0 0 .2rem;font-size:1.3rem}
header p{margin:0;font-size:.9rem;opacity:.9}

main{flex:1;display:flex;min-height:0}
#map{flex:1;min-width:0}

aside#panel{width:340px;flex:0 0 auto;border-left:1px solid var(--line);
  background:#fff;padding:1rem 1.1rem;overflow-y:auto}

#search-form{display:flex;gap:.4rem;margin-top:1rem}
#search-box{flex:1;padding:.5rem .6rem;border:1px solid #c7cec8;border-radius:6px;font-size:.92rem}
#search-form button{background:var(--green-d);color:#fff;border:0;border-radius:6px;
  padding:.5rem .8rem;font-weight:600;cursor:pointer}
#search-status{font-size:.82rem;color:var(--muted)}

.locate-row{display:flex;gap:.4rem;margin-top:.5rem}
.locate-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.3rem;
  background:#eef5ee;color:var(--green-d);border:1px solid #cfe3d0;border-radius:6px;
  padding:.5rem .5rem;font-size:.82rem;font-weight:600;cursor:pointer;text-align:center}
.locate-btn:hover{background:var(--green-l)}

#back-btn,.back-btn-outside{background:none;border:1px solid var(--line);border-radius:6px;
  padding:.35rem .7rem;font-size:.82rem;color:var(--muted);cursor:pointer;margin-bottom:.8rem}

#risk-badge{display:inline-block;font-weight:800;font-size:1.05rem;padding:.35rem .8rem;
  border-radius:20px;color:#fff;margin-bottom:.3rem}
#risk-badge.low{background:var(--low)}
#risk-badge.mod{background:var(--mod)}
#risk-badge.high{background:var(--high)}

#panel-result h2{font-size:1rem;margin:.6rem 0 .2rem;color:var(--green-d)}
#risk-caveat{font-size:.78rem;color:var(--muted);margin:.1rem 0 .8rem}
#panel-result h3{font-size:.92rem;margin:.9rem 0 .3rem}
#why-list{margin:0;padding-left:1.1rem;font-size:.9rem;line-height:1.5}
#why-list li{margin-bottom:.4rem}
#why-list b{color:var(--ink)}

#raw-details{margin-top:1rem;font-size:.82rem;color:var(--muted)}
#raw-table{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:.8rem}
#raw-table td{padding:.2rem 0;border-bottom:1px solid var(--line)}
#raw-table td:last-child{text-align:right;font-weight:600;color:var(--ink)}

#panel-outside p{font-size:.9rem}

.survey-btn{display:inline-block;background:#fff;color:var(--green-d);
  border:1px solid var(--green-d);border-radius:6px;padding:.45rem .8rem;
  font-size:.85rem;font-weight:600;cursor:pointer;margin-top:.6rem}
.survey-btn.primary{background:var(--green-d);color:#fff;margin-right:.4rem}
.survey-btn:hover{background:var(--green-l)}
.survey-btn.primary:hover{background:var(--green)}

#survey-form{margin-top:.6rem;padding-top:.8rem;border-top:1px solid var(--line)}
#survey-form .hint{font-size:.78rem;color:var(--muted);margin:.1rem 0 .6rem}
.survey-species{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.6rem}
.survey-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.survey-row label{font-size:.85rem;flex:1}
.survey-row select{font-size:.82rem;padding:.25rem .3rem;border:1px solid #c7cec8;
  border-radius:5px;background:#fff}
#survey-form textarea{width:100%;padding:.5rem;border:1px solid #c7cec8;
  border-radius:6px;font-family:inherit;font-size:.85rem;margin-top:.2rem}
#survey-status.ok{color:var(--green-d);font-weight:600}
#survey-status.err{color:var(--high);font-weight:600}

footer{font-size:.75rem;color:var(--muted);text-align:center;padding:.6rem;
  border-top:1px solid var(--line);background:#fff}
footer a{color:var(--green-d)}

.leaflet-popup-content{font-size:.85rem}

@media (max-width:720px){
  main{flex-direction:column}
  aside#panel{width:100%;max-height:45vh;border-left:0;border-top:1px solid var(--line)}
}