:root {
  --ink: #17322b;
  --muted: #5a7168;
  --sand: #f7f2e9;
  --sage: #e7efe8;
  --gold: #d7a85b;
}

body {
  background:
    radial-gradient(circle at top left, rgba(215, 168, 91, 0.18), transparent 28%),
    linear-gradient(180deg, var(--sand) 0%, #fcfbf8 48%, var(--sage) 100%);
  color: var(--ink);
}

.hero {
  background: linear-gradient(140deg, #17322b 0%, #35594d 55%, #c9954a 100%);
  color: white;
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 1.25rem 3rem rgba(23, 50, 43, 0.18);
}

.hero .text-muted {
  color: rgba(255, 255, 255, 0.78) !important;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.plan-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.quick-card,
.filter-card,
.recipe-card {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 2.5rem rgba(23, 50, 43, 0.08);
}

.quick-card,
.filter-card {
  padding: 1.5rem;
}

#pagination {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.recipe-card {
  overflow: hidden;
}

.recipe-image-fallback {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eff4f0, #d7e5db);
  color: var(--muted);
  font-weight: 600;
}