body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: url("../img/background.jpg") no-repeat center center fixed;
  background-size: cover;
}
.navbar, footer { background-color: rgba(51,51,51,0.85); }
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; color: white; flex-shrink:0; }
.navbar .logo { display:flex; align-items:center; font-size:1.5em; font-weight:bold; }
.navbar .logo img { height:40px;width:40px;margin-right:10px; }
.navbar ul { list-style:none; display:flex; margin:0;padding:0; }
.navbar li { margin-left:20px; }
.navbar a { text-decoration:none; color:white; transition:color 0.3s; }
.navbar a:hover { color:#ffcc00; }

.content { flex:1; display:flex; margin:20px; padding:0; background:none; border-radius:10px; overflow:hidden; position:relative; }
#map { flex:1; width:100%; height:100%; border:none; }

#coord { position:absolute; bottom:40px; right:20px; background: rgba(0,0,0,0.6); color:white; padding:5px 10px; font-size:14px; border-radius:5px; pointer-events:none; z-index:1001 }

#panel {
  position:absolute;
  top:20px;
  right:10px;
  background: rgba(255,255,255,0.95);
  padding:10px;
  border-radius:8px;
  z-index:1000;
  width:250px;
}
#panel select, #panel input { width:100%; margin-bottom:5px; padding:5px; box-sizing:border-box; }
#panel input { display:none; position:relative; z-index:1000; }

footer { color:#ccc; text-align:center; padding:15px 20px; font-size:0.9em; flex-shrink:0; }
footer a { color:#ffcc00; text-decoration:none; }
footer a:hover { text-decoration:underline; }

@media(max-width:600px){
  #coord { display:none; }
  #panel { width:150px; top:10px; right:5px; }
  #panel select, #panel input { padding:4px; font-size:0.85em; }
}