/* Minor tweaks on top of Bootswatch Darkly */
:root {
  --pc-accent: #7f5af0;
  --pc-muted: #94a3b8;
}

.masonry-grid { margin: 0 auto; }
.masonry-item { width: 100%; max-width: 900px; margin: 0 auto 24px; }
@media (max-width: 576px) { .masonry-item { width: 100%; max-width: 100%; } }
@media (min-width: 577px) and (max-width: 992px) { .masonry-item { width: 100%; max-width: 900px; } }

.photo-card { position: relative; }
.photo-layout { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; }
.photo-media img { width: 100%; display: block; }
.fav-side { display: flex; align-items: center; }
.fav-side .btn { white-space: nowrap; border-radius: 999px; padding: .5rem 1rem; }

body {
  background: radial-gradient(1200px 800px at 20% -200px, rgba(127, 90, 240, 0.15), transparent 60%),
              radial-gradient(800px 600px at 120% 0%, rgba(20, 184, 166, 0.12), transparent 60%),
              #0b0e14;
}

.navbar-brand img { border-radius: 4px; }

.card, .modal-content, .dropdown-menu, .list-group-item {
  backdrop-filter: blur(6px);
  background-color: rgba(17, 24, 39, 0.85);
}

.btn-outline-accent {
  color: var(--pc-accent);
  border-color: var(--pc-accent);
}
.btn-outline-accent:hover { background-color: var(--pc-accent); color: #0b0e14; }

.text-muted-2 { color: var(--pc-muted) !important; }

.grid-albums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.album-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.album-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }

.album-thumb { height: 200px; object-fit: cover; width: 100%; border-radius: .5rem; }

.pagination .page-link { border-radius: .375rem; }

.tag-badge { cursor: pointer; }