:root {
  --bg: #0b0d10;
  --panel: #141821;
  --text: #e8eef8;
  --muted: #a8b2c1;
  --accent: #4f8cff;
  --success: #19c37d;
  --danger: #ff5d5d;
  --warning: #f7b955;
  --border: #202635;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(10,12,16,0.9), rgba(10,12,16,0.6));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.app-header h1 { margin: 0; font-size: 18px; }

.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-height: calc(100vh - 54px);
}

.controls {
  padding: 12px;
  display: grid;
  gap: 12px;
}

.actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: #161b26;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
}
.btn.primary { border-color: var(--accent); background: #13223f; }
.btn.success { border-color: var(--success); background: #0f2a22; }
.btn:active { transform: translateY(1px); }

.sites-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sites-header { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); }
.sites-header h2 { margin: 0; font-size: 16px; }
.start-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; position: relative; }
.start-row input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #0d1117; color: var(--text); }
.add-site { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; position: relative; }
.add-site input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #0d1117; color: var(--text); }
/* Autocomplete dropdown */
.autocomplete {
  position: absolute;
  margin-top: 44px; /* below input */
  width: calc(100% - 8px);
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  z-index: 5;
}
.autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item.active { background: #13223f; }
.autocomplete-empty { padding: 10px 12px; color: var(--muted); }

.sites-list { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow: auto; }
.sites-list li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.sites-list li:last-child { border-bottom: none; }
.site-name { color: var(--muted); }
.site-actions button { margin-left: 6px; }
.btn.small { padding: 6px 8px; font-size: 12px; border-radius: 8px; }
.btn.danger { border-color: var(--danger); background: #2a1212; }

.info-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 6px; }
.info-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; }
.label { color: var(--muted); }
.tip { color: var(--muted); font-size: 12px; margin-top: 4px; }

.map-wrap { position: relative; height: 55vh; padding: 0 12px 12px; }
#map { height: 100%; width: 100%; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }

@media (min-width: 900px) {
  .app { grid-template-columns: 420px 1fr; grid-template-rows: 1fr; }
  .map-wrap { height: calc(100vh - 100px); padding: 12px; }
}

/* Leaflet marker color helpers */
.marker-user { filter: hue-rotate(190deg) saturate(2); }
.marker-nearest { filter: hue-rotate(100deg) saturate(2); }