body { margin: 0; font-family: var(--ff-sans);
  background: var(--c-bg); color: var(--c-text); }
.container { max-width: 1080px; margin: 0 auto; padding: var(--sp-6) var(--sp-4); }

.crumb { color: var(--c-text-muted); font-size: var(--fs-100); margin-bottom: 14px; }
.crumb a { color: var(--c-text-muted); text-decoration: none; transition: color var(--d-base) var(--e-out); }
@media (hover: hover) { .crumb a:hover { color: var(--c-brand); } }
h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-500); color: var(--c-text); }
.sub { color: var(--c-text-muted); font-size: var(--fs-200); margin: 0 0 var(--sp-5); }

.search-bar { position: relative; margin-bottom: 14px; }
.search-bar input {
  width: 100%; padding: var(--sp-3) 44px var(--sp-3) 44px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg-elevated); font-size: 15px; color: var(--c-text); box-sizing: border-box;
  transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.search-bar input::placeholder { color: var(--c-text-muted); opacity: 0.7; }
.search-bar input:focus { outline: none; border-color: var(--c-brand);
  box-shadow: var(--sh-focus); }
.search-bar::before {
  content: "🔍"; position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-300); pointer-events: none; opacity: .6;
}
.search-bar .clear-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: transparent; color: var(--c-text-muted); border: 0; border-radius: 50%;
  width: 44px; height: 44px; font-size: 18px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
@media (hover: hover) { .search-bar .clear-btn:hover { background: var(--c-bg); color: var(--c-text); } }
.search-bar.active .clear-btn { display: flex; }
.search-meta { font-size: var(--fs-100); color: var(--c-text-muted); margin: -8px 0 14px var(--sp-1); display: none; }
.search-meta.active { display: block; }
.search-meta b { color: var(--c-text); }
.search-hl { background: var(--c-warning); color: var(--c-text-on-brand); padding: 0 2px; border-radius: 2px; }

.pins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pin-card { content-visibility: auto; contain-intrinsic-size: 280px;
  background: var(--c-bg-elevated); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit;
  border: 1px solid var(--c-border); transition: border-color var(--d-base) var(--e-out); }
@media (hover: hover) { .pin-card:hover { border-color: var(--c-brand); } }
.pin-thumb { aspect-ratio: 1/1; background: var(--c-bg); }
.pin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.empty-state { text-align: center; color: var(--c-text-muted); padding: var(--sp-10) var(--sp-4); }