:root {
  --brand-primary: #1470ad;
  --brand-accent: #fc2a68;
  --brand-ink: #0b1f2a;
  --brand-soft: #eef5fb;
}

body {
  font-family: "Source Sans 3", "Segoe UI", Tahoma, sans-serif;
  color: var(--brand-ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(20, 112, 173, 0.08), transparent 40%),
    radial-gradient(circle at 90% 20%, rgba(252, 42, 104, 0.08), transparent 45%),
    linear-gradient(120deg, #f7fbff, #eef5fb);
  min-height: 100vh;
}

h1, h2, h3, h4, h5 {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 600;
}

.app-navbar {
  background: #ffffff;
  border-bottom: 1px solid rgba(11, 31, 42, 0.08);
  box-shadow: 0 10px 30px rgba(11, 31, 42, 0.08);
}

.app-brand {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 700;
  color: var(--brand-ink);
}

.app-brand:hover {
  color: var(--brand-primary);
}

.page-shell {
  background: #ffffff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(11, 31, 42, 0.12);
}

.flash-area {
  margin-bottom: 12px;
}

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

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
  background-color: var(--brand-primary);
  color: #fff;
}

.btn-secondary {
  background-color: #233b46;
  border-color: #233b46;
}

.modal-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 24px 60px rgba(11, 31, 42, 0.2);
}

/* Off-canvas menu for mobile */
  @media (max-width: 992px) {
    #navbarContent {
      position: fixed;
      top: 56px; /* height of navbar */
      left: -250px;
      width: 250px;
      height: calc(100% - 56px);
      background-color: #ffffff;
      border-right: 1px solid rgba(11, 31, 42, 0.08);
      transition: left 0.3s ease;
      padding-top: 1rem;
      z-index: 1030;
    }
    #navbarContent.show {
      left: 0;
    }
    body {
      overflow-x: hidden;
    }
  }