:root{
  --panel:#0b1220ee;
  --ink:#e8f0ff;
  --muted:#9fb0c2;
  --line:#203040;
}

html, body {
  height:100%;
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell;
}

#map{
  position:absolute;
  inset:0;
  background:#f3f5f8;
}

.panel{
  position:absolute;
  top:12px;
  left:12px;
  z-index:10;
  width:360px;
  max-height:calc(100% - 24px);
  padding:12px 14px;
  border-radius:16px;
  background:var(--panel);
  color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  overflow:auto;
}

.title{
  font-weight:800;
  font-size:16px;
  margin-bottom:2px;
}

.sub{
  color:var(--muted);
  font-size:12px;
  margin-bottom:10px;
}

.group{
  border-top:1px solid var(--line);
  padding-top:10px;
  margin-top:10px;
}

.label{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}

select{
  width:100%;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #2a4258;
  background:#0e1a28;
  color:var(--ink);
}

.status{
  white-space:pre-wrap;
  font-size:12px;
  line-height:1.35;
  color:#cde7ff;
}

/* Popup */
.maplibregl-popup-content{
  padding:12px;
  border-radius:14px;
}

.popup h3{
  margin:0 0 6px;
  font-size:14px;
}

.popup .meta{
  font-size:12px;
  color:#334155;
}

.popup .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.popup a,
.popup button{
  font-size:12px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#0f172a;
  cursor:pointer;
  text-decoration:none;
}

.popup a:hover,
.popup button:hover{
  border-color:#94a3b8;
}

.popup img{
  width:100%;
  max-width:520px;
  margin-top:8px;
  border-radius:10px;
  border:1px solid #e2e8f0;
}