:root { --radius: 12px; }
body { background: var(--bs-body-bg); }
[data-bs-theme="dark"] { color-scheme: dark; }

.navbar-brand { font-weight: 700; letter-spacing: .3px; }
.masonry { column-count: 1; column-gap: 1rem; }
@media (min-width: 576px) { .masonry { column-count: 2; } }
@media (min-width: 768px) { .masonry { column-count: 3; } }
@media (min-width: 1200px) { .masonry { column-count: 4; } }

.masonry .card {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  transition: transform .15s ease, box-shadow .15s ease;
}
.masonry .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.masonry img { width: 100%; height: auto; display: block; background:#f4f4f5; }

.card-actions { display:flex; gap:.5rem; padding:.6rem; }
.toast-container { z-index: 1080; }
.empty { text-align:center; padding:4rem 1rem; color: var(--bs-secondary-color); }
.spinner-wrap { display:flex; justify-content:center; padding:2rem; }
.hero { padding: 3rem 0 1rem; }
.hero h1 { font-weight: 700; }
.copy-btn { cursor:pointer; }