:root {
  --ink: #0f2533;
  --panel: rgba(9, 26, 35, 0.72);
  --panel-light: rgba(255, 255, 255, 0.9);
  --line: rgba(255, 255, 255, 0.2);
  --accent: #00b1c8;
  --accent-2: #7de7f2;
  --danger: #e24242;
  --ok: #11945d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Avenir Next", "SF Pro Rounded", "Segoe UI", sans-serif;
  background: #0e202c;
}

#map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.overlay {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
}

.top-overlay {
  top: 0;
  padding: calc(env(safe-area-inset-top) + 8px) 10px 8px;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.bottom-overlay {
  bottom: 0;
  padding: 8px 10px calc(env(safe-area-inset-bottom) + 10px);
  display: grid;
  gap: 8px;
  justify-items: center;
}

.spectre-logo {
  width: min(250px, 70vw);
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
}

.spectre-logo svg { width: 100%; height: auto; }

.toolbar {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px;
  backdrop-filter: blur(8px);
}

.btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  background: #18475b;
}

.btn.secondary { background: #0c8ba0; }
.btn.ghost { background: rgba(255, 255, 255, 0.16); }
.btn.active {
  background: #dbf8fb;
  color: #0e4656;
  border-color: #84d8e4;
}

.bottom-overlay .status-chip,
.bottom-overlay #copyPayloadBtn,
.bottom-overlay #trackerPayload {
  pointer-events: auto;
}

.status-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f7fdff;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  backdrop-filter: blur(8px);
  font-size: 0.9rem;
}

#countBadge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent-2);
  color: #033440;
  font-weight: 700;
}

#copyPayloadBtn.compact {
  background: rgba(255, 255, 255, 0.9);
  color: #113242;
}

#trackerPayload {
  width: min(520px, calc(100vw - 20px));
  min-height: 70px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(7, 20, 28, 0.64);
  color: #dffaff;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: "Menlo", "SF Mono", monospace;
}

.leaflet-div-icon.default-point-icon {
  background: #0e718d;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(14, 113, 141, 0.24);
}

.leaflet-div-icon.active-point-icon {
  background: #00b1c8;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 177, 200, 0.34);
}

.leaflet-div-icon.user-point-icon {
  background: #ff6a00;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 24px !important;
  height: 24px !important;
  box-shadow: 0 0 0 5px rgba(255, 106, 0, 0.32);
}

.popup-editor {
  min-width: 220px;
  display: grid;
  gap: 7px;
  font-family: "Avenir Next", "SF Pro Rounded", "Segoe UI", sans-serif;
}

.popup-editor label {
  font-size: 0.78rem;
  color: #304d5a;
  display: grid;
  gap: 4px;
}

.popup-editor input {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #c7dbe3;
  border-radius: 9px;
  font-size: 0.9rem;
}

.popup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.popup-actions {
  display: flex;
  gap: 7px;
}

.popup-actions button {
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 0.85rem;
}

.popup-save { background: #e6f8ef; color: var(--ok); }
.popup-delete { background: #fce9e9; color: var(--danger); }
.popup-add { background: #dbf8fb; color: #0f5e73; }

@media (max-width: 680px) {
  .toolbar { width: 100%; border-radius: 14px; }
  .btn { flex: 1; }
  #trackerPayload { min-height: 58px; }
}


.debug-panel {
  margin: 6px 0 0 0;
  width: min(520px, calc(100vw - 20px));
  max-height: 120px;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(0, 0, 0, 0.38);
  color: #e7faff;
  padding: 6px 8px;
  font: 12px/1.3 Menlo, Monaco, Consolas, monospace;
}

.leaflet-marker-icon.active-pin {
  filter: hue-rotate(130deg) saturate(1.2);
}


.leaflet-control-zoom {
  display: none !important;
}


.locate-fab {
  position: fixed;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  z-index: 1200;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(14, 113, 141, 0.92);
  color: #fff;
  font: 700 14px/1 "Avenir Next", "SF Pro Rounded", sans-serif;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.locate-fab:active {
  transform: scale(0.97);
}

.locate-fab.ready {
  background: rgba(14, 141, 85, 0.95);
}


.locate-fab.busy {
  background: rgba(80, 80, 80, 0.92);
}

.locate-fab.error {
  background: rgba(170, 55, 55, 0.95);
}


.spectre-float {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: calc(env(safe-area-inset-left) + 10px);
  transform: none;
  z-index: 1200;
  width: min(150px, 42vw);
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.30));
}

.spectre-float img {
  width: 100%;
  height: auto;
  display: block;
}


.user-pos-tooltip {
  background: rgba(255, 106, 0, 0.92);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 2px 8px;
  font: 700 11px/1.2 "Avenir Next", "SF Pro Rounded", sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.user-pos-tooltip:before {
  border-top-color: rgba(255, 106, 0, 0.92) !important;
}


.leaflet-marker-icon.inactive-pin {
  filter: grayscale(1) opacity(0.45);
}

.toggle-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.toggle-row input[type="checkbox"] {
  width: auto;
  transform: scale(1.15);
}