:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; }

#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 48px;
  display: flex; align-items: center; gap: .75rem; padding: 0 1rem;
  background: #1b1c22; border-bottom: 1px solid #2a2b33; color: #e8e8ea;
  z-index: 1000;
}
.brand { font-weight: 700; letter-spacing: .2px; }
.spacer { flex: 1; }
.muted { color: #9a9aa2; font-size: .9rem; }
#topbar a { color: #e84d8a; text-decoration: none; }
#topbar a:hover { text-decoration: underline; }
#topbar strong { color: #e8e8ea; }

#map { position: absolute; inset: 48px 0 0 0; background: #14151a; }

/* Save-Bar */
#savebar {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .9rem; z-index: 1000;
  background: #1b1c22; border: 1px solid #2a2b33; border-radius: 999px;
  padding: .5rem .6rem .5rem 1.1rem; box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
#savebar .muted { white-space: nowrap; }
#savebtn {
  border: 0; border-radius: 999px; padding: .5rem 1.2rem; font-weight: 600;
  background: #e84d8a; color: #fff; cursor: pointer;
}
#savebtn:disabled { background: #3a3b44; color: #8a8a92; cursor: default; }

/* Toast */
#toast {
  position: absolute; bottom: 4.5rem; left: 50%; transform: translateX(-50%);
  z-index: 1001; max-width: min(90vw, 40rem); text-align: center;
  padding: .6rem 1rem; border-radius: .5rem; font-size: .9rem;
  background: #1b1c22; border: 1px solid #2a2b33; color: #e8e8ea;
}
#toast.ok  { border-color: #2e7d52; }
#toast.err { border-color: #b3422f; }

/* Popups */
.leaflet-popup-content { margin: .6rem .8rem; color: #1a1a1a; }
.popup-title { font-weight: 700; }
.popup-country { color: #777; font-size: .85rem; }