:root{
  --bg:#0e0f11; --panel:#14171a; --border:#2a2d33; --muted:#a8b0bd; --text:#e8ecf1; --accent:#5aa2ff;
}
*{box-sizing:border-box}
html, body{height:100%}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; background:var(--bg); color:var(--text)}
header{display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); background:#0c0d10; position:sticky; top:0; z-index:3}
h1{font-size:1.05rem; margin:0; line-height:1.2}
.controls{display:flex; gap:0.4rem; align-items:center}
button{background:var(--panel); border:1px solid var(--border); color:var(--text); padding:0.55rem 0.75rem; border-radius:12px; cursor:pointer; touch-action:manipulation}
button:hover{border-color:var(--accent)}
.toggle{display:flex; gap:0.5rem; align-items:center; user-select:none; color:var(--muted)}
.only-mobile{display:inline-flex}
main{display:grid; grid-template-columns: 1fr; grid-template-rows: 52vh calc(48vh - 50px)}
#map{height:100%; width:100%}
#sidebar{overflow:auto; border-top:1px solid var(--border); background:linear-gradient(180deg,#0e0f11,#0c0d10); padding-bottom: env(safe-area-inset-bottom)}
.panel{padding:0.75rem; border-bottom:1px solid var(--border)}
.panel h2{margin:0 0 0.5rem 0; font-size:1.05rem}
.panel .panel-head{display:flex; gap:0.5rem; align-items:center; justify-content:space-between}
#search{width:50%; max-width:260px; padding:0.5rem 0.65rem; border-radius:10px; border:1px solid var(--border); background:#0f1116; color:var(--text)}
.card{border:1px solid var(--border); border-radius:12px; padding:0.75rem; margin-bottom:0.75rem; background:var(--panel)}
.card h3{margin:0 0 0.25rem 0; font-size:1rem}
.meta{color:var(--muted); font-size:0.9rem; margin:0.25rem 0 0.5rem 0}
.actions{display:flex; gap:0.5rem; flex-wrap:wrap}
a.btn, button.btn{display:inline-block; padding:0.55rem 0.8rem; border-radius:10px; text-decoration:none; border:1px solid var(--border); color:var(--text); background:#0f1116}
a.btn:hover, button.btn:hover{border-color:var(--accent)}
.leaflet-container{background:#0b0c0f}
.leaflet-popup-content{color:#111}
.leaflet-control-layers{border-radius:12px; overflow:hidden}
.leaflet-control-layers-expanded{background:#fff}
.leaflet-bar a, .leaflet-bar a:hover{width:40px; height:40px; line-height:40px; font-size:18px}
.modal{position:fixed; inset:0; display:none; place-items:center; padding:1rem; background:rgba(0,0,0,.5); z-index:5}
.modal[aria-hidden="false"]{display:grid}
.modal-content{max-height:85vh; overflow:auto; width:min(900px, 100%); background:#fff; color:#111; border-radius:14px; padding:1rem 1.25rem 1.5rem; box-shadow:0 10px 40px rgba(0,0,0,.5)}
.modal-close{position:sticky; top:0; float:right; font-size:1.6rem; line-height:1; background:#f3f4f5; color:#111; border:none; border-radius:10px; padding:0.2rem 0.6rem; margin-left:auto; cursor:pointer}
.modal-content h3{margin-top:0}
#overviewContent, #practicalContent{white-space:pre-wrap; color:#dbe2ee}
.fab{position:absolute; right:0.9rem; bottom:0.9rem; z-index:2; width:56px; height:56px; border-radius:50%; border:1px solid var(--border); background:#0f1116; color:var(--text); display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 8px 24px rgba(0,0,0,.35)}
footer{padding:0.5rem 0.9rem; border-top:1px solid var(--border); color:var(--muted); background:#0c0d10}
@media (min-width: 900px){
  .only-mobile{display:none}
  main{grid-template-columns: minmax(340px, 430px) 1fr; grid-template-rows: calc(100vh - 58px)}
  #sidebar{border-right:1px solid var(--border); border-top:none}
  h1{font-size:1.2rem}
  #search{width:60%}
}