* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.4 system-ui, sans-serif; }
body { display: flex; flex-direction: column; }
header {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .8rem; background: #1b2430; color: #eef; flex: 0 0 auto;
}
header .logo { color: inherit; text-decoration: none; }
header .logo:hover { text-decoration: underline; }
header .hint { color: #9fb0c3; font-size: 12px; }
header .spacer { flex: 1; }
#map { flex: 1 1 auto; }
button {
  background: #2d3e50; color: #eef; border: 1px solid #3d5266;
  border-radius: 6px; padding: .4rem .7rem; min-height: 38px; cursor: pointer;
}

/* Mobile: hide the verbose hint, let the toolbar wrap, give thumbs room */
@media (max-width: 640px) {
  header { gap: .4rem; padding: .4rem .5rem; }
  header strong { width: 100%; }
  header .hint { display: none; }
  header .spacer { display: none; }
  button { flex: 1 1 auto; padding: .55rem .5rem; min-height: 44px; font-size: 14px; }
  .settings-panel { min-width: 180px; }
}
button:disabled { opacity: .45; cursor: default; }
button#route { background: #2e7d4f; border-color: #3fa06a; }
.status { padding: .2rem .55rem; border-radius: 10px; font-size: 12px; font-weight: 600; }
.status.idle      { background: #3a4656; color: #cdd; }
.status.clipping,
.status.importing,
.status.loading   { background: #7a5a12; color: #ffe6b0; }
.status.ready     { background: #1f6b3e; color: #c9f5d8; }
.status.error     { background: #7a1f1f; color: #ffd0d0; }
.dist { color: #cfe3ff; font-weight: 600; font-variant-numeric: tabular-nums; }
button#loop.on { background: #2e7d4f; border-color: #3fa06a; }

/* Leaflet locate-me control */
.locate-ctl a { font-size: 18px; font-weight: bold; text-align: center; }
.locate-ctl a.locating { color: #1e6fff; }

/* Leaflet settings control */
.settings-ctl { background: #fff; }
.settings-ctl .settings-toggle {
  width: 34px; height: 34px; border: none; background: #fff; color: #333;
  font-size: 18px; line-height: 34px; cursor: pointer; padding: 0;
}
.settings-ctl .settings-toggle:hover { background: #f4f4f4; }
.settings-panel {
  padding: 8px 10px; min-width: 210px; color: #222; font: 13px/1.4 system-ui, sans-serif;
  border-top: 1px solid #ddd;
}
.settings-title { font-weight: 600; margin-bottom: 6px; }
.settings-panel .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.settings-panel .row.check { justify-content: flex-start; }
.settings-panel select { flex: 1; max-width: 130px; }
.settings-panel input[type=checkbox] { width: 16px; height: 16px; }