/* Minimal, elegant styling (screenshot-inspired) */
:root{
  --bg:#f7f9fc;
  --fg:#111827;
  --muted:#6b7280;
  --card:#ffffff;
  --stroke:#e5e7eb;
  --pill:#eef2ff;
  --pill-text:#3b82f6;
  --accent:#4f46e5;
  --shadow: 0 10px 20px rgba(17,24,39,.06);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
h1{font-size:3rem;letter-spacing:.2px;margin:0 0 8px}
.hero{max-width:960px;margin:36px auto 8px;padding:0 16px;text-align:center}
.subtitle{color:var(--muted);margin:0 auto 10px;max-width:720px}
.stats{display:flex;gap:20px;justify-content:center;color:var(--muted)}
.stat{display:flex;align-items:center;gap:8px}
.icon{width:18px;height:18px}
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px auto 24px;padding:0 16px}
.pill{border:1px solid var(--stroke);background:#fff;color:#374151;padding:6px 10px;border-radius:999px;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.pill.active{background:var(--pill);color:var(--pill-text);border-color:#dbeafe}
.pill:focus{outline:2px solid #c7d2fe;outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px 60px}
.grid{display:grid;grid-template-columns:repeat(1, minmax(0,1fr));gap:18px}
@media (min-width:700px){.grid{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (min-width:1040px){.grid{grid-template-columns:repeat(3, minmax(0,1fr));}}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card .img-wrap{position:relative;overflow:hidden}
.card img{display:block;width:100%;height:280px;object-fit:cover;background:#0b0d10}
.tag{position:absolute;right:12px;bottom:12px;background:#f5f3ff;color:#7c3aed;border:1px solid #ede9fe;border-radius:999px;font-size:.75rem;padding:4px 8px}
.card-body{padding:14px}
.card h3{margin:0 0 6px;font-size:1rem}
.card p{margin:0 0 10px;color:#4b5563;font-size:.92rem;min-height:3.4em}
.meta{display:flex;gap:12px;color:#6b7280;font-size:.85rem;flex-wrap:wrap}
.meta svg{width:16px;height:16px;margin-right:4px}
.btn{appearance:none;border:1px solid var(--stroke);background:#fff;padding:6px 10px;border-radius:10px;cursor:pointer}
/* Lightbox */
#viewer{border:none;border-radius:var(--radius);padding:0;max-width:min(96vw,1600px);max-height:96vh}
#viewer::backdrop{background:rgba(0,0,0,.7)}
.viewer-head{display:flex;justify-content:space-between;gap:8px;padding:10px;border-bottom:1px solid var(--stroke);background:#fff}
.viewer-img{display:block;max-width:96vw;max-height:70vh;width:auto;height:auto;background:#000}
.viewer-caption{padding:10px;border-top:1px solid var(--stroke);background:#fff;font-size:.95rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}