/* RelayOne Business — product polish layer */
:root {
  --product-green: #37e6a3;
  --product-cyan: #4fd7ed;
}

html { scroll-behavior: smooth; }
body { background-color: #07111f; }

#login form,
#app header,
#app section,
#app aside {
  isolation: isolate;
}

#login form { animation: product-enter .42s ease-out both; }

.mobile-product-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(.75rem, env(safe-area-inset-top)) 1rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(7,17,31,.9);
  backdrop-filter: blur(20px);
}

.mobile-icon-btn {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .9rem;
  background: rgba(255,255,255,.05);
  color: #dbeafe;
  font-size: 1.1rem;
  font-weight: 900;
}

.nav-dot {
  width: .45rem;
  height: .45rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  opacity: .58;
  box-shadow: 0 0 0 4px rgba(255,255,255,.035);
}

.setup-step {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .9rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  background: rgba(255,255,255,.03);
}
.setup-step b {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .65rem;
  color: #052016;
  background: linear-gradient(135deg, var(--product-green), var(--product-cyan));
}

button { touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .55; }

input, textarea, select { color-scheme: dark; }

#overview { background: linear-gradient(135deg, rgba(8,19,34,.94), rgba(7,26,31,.86)); }
#overview h1 { text-wrap: balance; }

.leaflet-container { font-family: inherit; }

@keyframes product-enter {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 640px) {
  #app > div.mx-auto { padding-top: .75rem; }
  #overview h1 { font-size: 2rem; line-height: 1.05; }
  #overview .flex-wrap button { flex: 1 1 calc(50% - .5rem); min-height: 3rem; }
  #performance .grid.md\:grid-cols-2,
  #connections,
  #rules,
  #account { grid-template-columns: minmax(0, 1fr); }
  textarea { min-height: 8rem; }
}