.composer, .post, .recipe-detail, .form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.composer { padding: 1rem; margin-bottom: 1rem; }

.composer textarea,
.composer input:not([type="file"]) {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: .7rem;
  margin-bottom: .6rem;
  font: inherit;
}

.composer-actions { display: flex; justify-content: space-between; align-items: center; }

.feed-tabs {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}

.feed-tabs a {
  flex: 1;
  text-align: center;
  padding: .8rem;
  background: var(--surface);
}

.feed-tabs a.active { color: var(--amber); font-weight: 700; }

.post {
  display: flex;
  gap: .8rem;
  padding: 1rem;
  margin-bottom: .8rem;
}

.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.post-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.post-text { margin: .35rem 0; white-space: pre-wrap; }
.post-image { border-radius: 12px; margin-top: .7rem; }

.ingredient-tags { color: var(--basil); font-size: .88rem; }

.recipe-attachment {
  display: block;
  margin-top: .7rem;
  padding: .7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--amber);
}

.post-actions { display: flex; gap: 1rem; margin-top: .7rem; }
.action { color: var(--muted); background: none; border: 0; cursor: pointer; font: inherit; }
.action.active { color: var(--tomato); }