/* MundaApp · the network bar. One line, above the tab bar, never a modal. */

.net-bar {
  position: fixed; left: 10px; right: 10px; bottom: 74px; z-index: 60;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.4;
  box-shadow: 0 8px 22px rgba(16, 40, 28, .16);
  animation: net-in .18s ease-out;
}
.net-bar[hidden] { display: none; }
.net-bar--off { background: #2b2f2c; color: #f4f6f3; border: 1px solid #3a403c; }
.net-bar--ok { background: #14663c; color: #fff; border: 1px solid #14663c; }
.net-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 5px; }
.net-bar--off .net-dot { background: #f0b429; }
.net-bar--ok .net-dot { background: #9fe3b6; }

@keyframes net-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (min-width: 720px) {
  .net-bar { left: 50%; right: auto; width: 420px; transform: translateX(-50%); }
  @keyframes net-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
}