:root{
  --bg:#0b0c0e;
  --panel:#14161a;
  --panel-2:#1b1f24;
  --text:#e9eef3;
  --muted:#9fb0c2;
  --border:#2a3037;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
  background:var(--bg);
  color:var(--text);
}
.app-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.6rem;
  padding:.5rem .7rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#0e1116,#0b0c0e);
  position:sticky;
  top:0;
  z-index:1000;
}
.app-header .left{display:flex;align-items:center;gap:.5rem}
.app-header h1{
  margin:0;
  font-size:clamp(.9rem,2vw,1.1rem);
  font-weight:650;
}
.controls{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.ghost-btn,.primary-btn{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:.4rem .6rem;
  border-radius:.6rem;
  cursor:pointer;
}
.primary-btn{
  background:linear-gradient(180deg,#1b7fb1,#176d97);
  border-color:#135a7b;
}
.segmented{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:.6rem;
  overflow:hidden;
  background:var(--panel);
}
.seg-btn{
  border:0;
  background:transparent;
  color:var(--text);
  padding:.35rem .6rem;
  cursor:pointer;
  font-size:.85rem;
}
.seg-btn.active{
  background:var(--panel-2);
}
select#placeSelect{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:.6rem;
  padding:.35rem .5rem;
  min-width:220px;
}
.app-main{
  display:flex;
  height:calc(100dvh - 52px);
}
.sidebar{
  width:320px;
  max-width:85vw;
  background:linear-gradient(180deg,#0f1217,#0c0e12);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  transition:transform .25s ease-out;
}
.sidebar.hidden{transform:translateX(-100%)}
.sidebar-header{
  padding:.8rem;
  border-bottom:1px solid var(--border);
}
.sidebar-content{padding:.8rem}
.sidebar-footer{
  padding:.6rem .8rem;
  border-top:1px solid var(--border);
  color:var(--muted);
}
.map{
  flex:1;
  min-height:300px;
}
.leaflet-popup-content{
  margin:.3rem .5rem;
  color:#0b0c0e;
}
.popup h3{
  margin:.2rem 0 .35rem;
  font-size:1.05rem;
}
.popup .tabs{
  display:flex;
  gap:.25rem;
  margin:.35rem 0;
}
.popup .tab-btn{
  border:1px solid #c8d2dc;
  background:#eef3f8;
  color:#0b2a3a;
  border-radius:.45rem;
  padding:.25rem .4rem;
  cursor:pointer;
  font-weight:600;
  font-size:.8rem;
}
.popup .tab-btn.active{background:#fff}
.popup .tab-panel{
  display:none;
  margin-top:.25rem;
}
.popup .tab-panel.active{display:block}
.popup p{
  margin:.25rem 0;
  line-height:1.35;
}
.popup .small{
  color:#334;
  font-size:.9rem;
}
.popup .btn-row{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.5rem;
}
.popup a.btn{
  text-decoration:none;
  padding:.35rem .55rem;
  border-radius:.5rem;
  border:1px solid #c8d2dc;
  background:#eff5fa;
  color:#0b2a3a;
  font-weight:600;
  font-size:.85rem;
}
.popup a.btn.secondary{
  background:#fff;
  border-color:#d6dfe8;
}
.popup a.btn:hover{filter:brightness(.98)}
@media (max-width:860px){
  .sidebar{
    position:absolute;
    z-index:900;
    height:calc(100dvh - 52px);
  }
}