map controls and time

src/App.css

@@ -1079,6 +1079,81 @@ body {
   background: #2a2a44;
 }
 
+.pass-time-panel {
+  position: absolute;
+  top: 60px;
+  left: 12px;
+  background: #1a1a2e;
+  border: 1px solid #5F71C5;
+  border-radius: 3px;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 20;
+  min-width: 180px;
+}
+
+.pass-time-header {
+  color: #5F71C5;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.pass-time-slider-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.pass-time-slider {
+  flex: 1;
+  accent-color: #5F71C5;
+  cursor: pointer;
+}
+
+.pass-time-label {
+  color: #e0e0e0;
+  font-size: 14px;
+  min-width: 30px;
+  text-align: right;
+}
+
+.pass-time-btns {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.pass-time-confirm {
+  background: #5F71C5;
+  color: #fff;
+  border: none;
+  border-radius: 1px;
+  padding: 6px 16px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.pass-time-confirm:hover {
+  background: #4a5cb0;
+}
+
+.pass-time-cancel {
+  background: none;
+  border: 1px solid #2e303a;
+  color: #6b7280;
+  border-radius: 1px;
+  padding: 6px 16px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.pass-time-cancel:hover {
+  color: #e0e0e0;
+  border-color: #5F71C5;
+}
+
 .bottom-left-btns {
   position: absolute;
   bottom: 40px;