.app-header{
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px;
  border-bottom:1px solid var(--border);
  background:#0b0d12;
}
.brand{font-weight:800;letter-spacing:.3px;}
.header-note{color:var(--muted);font-size:12px;}

.app{
  height:calc(100vh - var(--header-h));
  width:100vw;
  overflow:hidden;
  display:grid;
  grid-template-columns: var(--panel-w) minmax(0,1fr) var(--panel-w);
}

.map-shell{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#0b0d12;
}

#map,.map{
  width:100%;
  height:100%;
  position:relative;
}

.footer-legend{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(20,25,34,.96);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  z-index:20;
  box-shadow:var(--shadow);
}
.legend-pill{font-size:12px;color:var(--muted);}