:root { color-scheme: dark; }
html, body, #map { height: 100%; margin: 0; background: #0d0f0d; }
body { font: 15px system-ui; color: #e8e4da; }
#topbar { position: fixed; top: env(safe-area-inset-top, 0); left: 0; right: 0; z-index: 800;
  display: flex; gap: 8px; align-items: center; padding: 10px 12px;
  background: linear-gradient(#0d0f0dcc, transparent); }
#status { flex: 1; font-size: 13px; opacity: .85; }
button { background: #1d211d; color: #e8e4da; border: 1px solid #3a3f39; border-radius: 10px; padding: 9px 13px; }
#color-edit { width: 38px; height: 38px; padding: 2px; border: 1px solid #3a3f39; border-radius: 10px; background: #1d211d; }
#color-edit[hidden] { display: none; }
#preview-info { color: #e8e4da; text-align: center; }
#slider-wrap { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0) + 76px); left: 14px; right: 14px;
  z-index: 800; display: grid; gap: 3px; }
#slider-wrap label { font-size: 11px; opacity: .7; text-align: center; }
input[type=range] { width: 100%; accent-color: #ff8800; }
dialog { background: #15181500; border: none; } dialog::backdrop { background: #0d0f0dee; }
dialog h2 { color: #e8e4da; }
dialog input, dialog button { display: block; width: 240px; margin: 10px auto; padding: 11px; }
#hoes { position: fixed; inset: 0; z-index: 2000; background: #000; color: #4a4f49;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;
  touch-action: none; }
#hoes[hidden] { display: none; }
.member-marker { display: grid; justify-items: center; gap: 2px; }
.member-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 6px #000; }
.member-dot.stale { opacity: .45; }
.member-label { background: #0d0f0dcc; border: none; color: #e8e4da; font-size: 11px;
  padding: 1px 6px; border-radius: 8px; box-shadow: none; white-space: nowrap; }
.own-dot { width: 18px; height: 18px; border-radius: 50%; background: #ff8800;
  border: 2px solid #fff; box-shadow: 0 0 6px #000; }