body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f5f5;
  color: #222;
}

.hidden { display:none !important; }

/* TOP MENU */
#topmenu {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #222;
  color: white;
  padding: 10px;
  display: flex;
  gap: 10px;
  z-index: 9999;
  align-items: center;
}

#appTitle {
  flex: 2;
  font-size: 18px;
  font-weight: bold;
}

#topmenu button {
  flex: 1;
  padding: 10px;
  background: #444;
  color: white;
  border: none;
  border-radius: 6px;
}

/* SETTINGS PANEL */
#settingsPanel {
  position: fixed;
  top: 60px;
  left: 0; right: 0;
  background: white;
  padding: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 9999;
}

#settingsPanel label {
  display:block;
  margin-bottom:15px;
}

button.big, #chooseFileBtn, #navBtn {
  width:100%;
  padding:15px;
  font-size:18px;
  background:#444;
  color:white;
  border:none;
  border-radius:6px;
  margin-top:10px;
}

/* SEARCH */
#searchContainer {
  position: fixed;
  top: 70px;
  left: 0; right: 0;
  background: #f5f5f5;
  padding: 10px;
  display:flex;
  gap:10px;
  z-index:9998;
}

#searchBox {
  flex:1;
  padding:12px;
  font-size:18px;
  text-transform: uppercase;
}

#searchBtn {
  width:60px;
  background:#444;
  color:white;
  border:none;
}

/* SCREENS */
.screen {
  display:none;
  padding:140px 15px 15px;
  height:calc(100vh - 120px);
  overflow-y:auto;
}

.active { display:block; }

/* LIST */
.cache-item {
  display:flex;
  gap:10px;
  padding:8px;
  border-bottom:1px solid #ddd;
  background:white;
  flex-wrap:wrap;
}

.cache-label { flex:1; }

.done { opacity:0.5; text-decoration:line-through; }

.highlight { background:#fff6a3; }

.cache-type {
  width: 100%;
  font-size: 12px;
  color: #666;
}

.coord-line {
  width: 100%;
  margin-top: 6px;
}

.coord-line input {
  width: 100%;
  padding: 10px;
  font-size: 18px; /* voorkomt iOS zoom */
  box-sizing: border-box;
}

/* MAP */
#map { height:calc(100vh - 140px); }

/* DETAIL */
.distanceBox {
  font-size:22px;
  text-align:center;
  padding:10px;
  background:white;
  border-radius:8px;
  border:1px solid #ddd;
}

.doneRow {
  display:flex;
  gap:10px;
  margin-top:20px;
}