body { font-family: system-ui, Arial, sans-serif; margin: 0; padding: 16px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar button, .toolbar select, .toolbar input {
  padding: 8px 10px; border: 1px solid #ccc; background: #fff; border-radius: 8px; cursor: pointer;
}
#status { margin-right: 12px; color: #555; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

.card { border: 1px solid #e5e5e5; border-radius: 14px; overflow: hidden; background: #fff; }
.card-link { color: inherit; text-decoration: none; display: block; }
.img-wrap { aspect-ratio: 4 / 5; background: #f5f5f5; display: flex; align-items: center; justify-content: center; }
.img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { padding: 10px 12px; }
.card-body h3 { margin: 0 0 6px 0; font-size: 16px; }
.card-body p { margin: 0; font-size: 13px; color: #444; line-height: 1.35; max-height: 3.9em; overflow: hidden; }
.meta { margin-top: 8px; font-size: 12px; color: #666; }