* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
body { display: flex; flex-direction: column; }

#topbar {
  background: #14532d; color: #fff; padding: 10px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); z-index: 1000;
}
#store-name { font-size: 14px; opacity: .85; }
#status-strip { font-size: 18px; font-weight: 700; margin-top: 2px; }
#last-update { font-size: 12px; opacity: .75; margin-top: 2px; min-height: 15px; }

.status-wait   { color: #fef9c3; }
.status-moving { color: #bbf7d0; }
.status-done   { color: #86efac; }
.status-err    { color: #fecaca; }

#map { flex: 1; }

#overlay-msg {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
}
#overlay-msg.hidden { display: none; }
#overlay-msg .card {
  background: #fff; border-radius: 16px; padding: 28px 32px; text-align: center;
  max-width: 320px; box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
#overlay-icon { font-size: 48px; margin-bottom: 10px; }
#overlay-text { font-size: 18px; font-weight: 600; color: #1f2937; line-height: 1.6; }

.marker-emoji { font-size: 30px; line-height: 30px; text-shadow: 0 1px 3px rgba(0,0,0,.4); }