@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --nest-teal: #1f6b5f;
  --nest-sand: #f2efe9;
  --nest-dark: #18302d;
  --nest-accent: #f4b860;
}

body.app-body {
  font-family: 'Space Grotesk', sans-serif;
  background: radial-gradient(circle at top left, #f7f6f3 0%, #eaf3f1 45%, #fdfaf5 100%);
  color: var(--nest-dark);
  min-height: 100vh;
}

.navbar-brand {
  color: var(--nest-teal);
}

.btn-primary {
  background-color: var(--nest-teal);
  border-color: var(--nest-teal);
}

.btn-primary:hover {
  background-color: #185348;
  border-color: #185348;
}

.card {
  border: none;
  box-shadow: 0 10px 30px rgba(24, 48, 45, 0.08);
}

.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  border-top: 1px solid #e6e3dd;
  padding: 0.6rem 0.4rem;
  gap: 0.2rem;
  z-index: 1000;
}

.mobile-nav a {
  text-align: center;
  color: var(--nest-dark);
  text-decoration: none;
  font-size: 0.8rem;
}

@media (max-width: 991px) {
  main.container {
    padding-bottom: 4rem;
  }
}