body { font-family: sans-serif; margin: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; /* Prevent body scroll */ }

.controls { padding: 10px; background-color: #f0f0f0; border-bottom: 1px solid #ccc; flex-shrink: 0; /* Prevent controls from shrinking */ display: flex; align-items: center; }

#language-select { padding: 5px; font-size: 1em; }

#map { height: 100%; /* Fill remaining height / width: 100%; flex-grow: 1; / Allow map to grow */ }

#legend { position: absolute; bottom: 20px; right: 10px; background-color: rgba(255, 255, 255, 0.8); padding: 10px; border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,0.2); z-index: 1000; /* Ensure legend is on top */ max-height: 150px; overflow-y: auto; font-size: 0.9em; }

.legend-item { display: flex; align-items: center; margin-bottom: 3px; }

.legend-color { width: 15px; height: 15px; margin-right: 5px; border: 1px solid #ccc; }