.melpos-app-navigation {
  position: sticky;
  top: 0;
  z-index: 40;
  box-sizing: border-box;
  padding: calc(4px + env(safe-area-inset-top, 0px)) 16px 4px;
  border-bottom: 1px solid #e4e4e7;
  background: #fff;
  color: #27272a;
  font: 600 14px/1.5 system-ui, sans-serif;
}
.melpos-app-navigation[hidden], .melpos-app-navigation [hidden] { display: none !important; }
.melpos-app-navigation-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.melpos-app-navigation button {
  display: inline-flex;
  align-items: center;
  flex: none;
  width: auto;
  margin: 0;
  gap: 4px;
  min-height: 44px;
  min-width: 76px;
  padding: 0 8px 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.melpos-app-navigation button:focus-visible, .melpos-app-navigation a:focus-visible { outline: 2px solid #be185d; outline-offset: 2px; }
.melpos-app-navigation svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.melpos-app-navigation-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #71717a; }
.melpos-app-navigation p { margin: 4px 0; font-size: 13px; line-height: 1.7; }
.melpos-app-navigation a { display: inline-flex; align-items: center; min-height: 44px; color: #be185d; text-decoration: underline; }
body[data-app-navigation-visible] #root .sticky.top-0 { top: calc(52px + env(safe-area-inset-top, 0px)); }
body[data-app-navigation-visible] .mockbar { top: calc(52px + env(safe-area-inset-top, 0px)); }