body { margin: 0; display: flex; height: 100vh; font-family: sans-serif; overflow: hidden; }
#sidebar { width: 300px; background: #222; color: #fff; padding: 20px; z-index: 1000; overflow-y: auto;}
#map { flex-grow: 1; background: #000; }
#timeline { position: absolute; bottom: 20px; left: 320px; right: 20px; background: rgba(0,0,0,0.8); padding: 10px; color: white; z-index: 1000; border-radius: 8px; display: flex; align-items: center; gap: 15px;}
#day-slider { flex-grow: 1; }
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; }
.modal-content { background: #fff; margin: 15% auto; padding: 20px; width: 300px; color: black; border-radius: 5px; }
.close { float: right; cursor: pointer; font-size: 20px; }
button { cursor: pointer; padding: 5px 10px; margin-top: 5px; }
input, select { padding: 5px; width: 90%; margin-bottom: 5px; }
.legend-item { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.color-box { width: 15px; height: 15px; border-radius: 3px; }