*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0f0f0f;--surface:#1a1a1a;--text:#e0e0e0;--text2:#888;--accent:#e63946;--radius:8px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
header{padding:2rem 1.5rem 1rem;max-width:1400px;margin:0 auto}
h1{font-size:1.75rem;font-weight:600;margin-bottom:.75rem;letter-spacing:-.02em}
#filters{display:flex;gap:.5rem;flex-wrap:wrap}
.filter{padding:.35rem 1rem;border:1px solid #333;border-radius:20px;background:var(--surface);color:var(--text2);cursor:pointer;font-size:.85rem;transition:.2s}
.filter.active,.filter:hover{border-color:var(--accent);color:#fff}
.masonry{max-width:1400px;margin:0 auto;padding:0 1.5rem 2rem;columns:4;column-gap:1rem}
.masonry .item{break-inside:avoid;margin-bottom:1rem;border-radius:var(--radius);overflow:hidden;cursor:pointer;position:relative;transition:transform .2s,opacity .3s;opacity:0;animation:fadeIn .4s forwards}
.masonry .item:hover{transform:scale(1.02)}
.masonry .item img{width:100%;display:block;border-radius:var(--radius)}
.masonry .item .label{position:absolute;bottom:0;left:0;right:0;padding:.5rem;background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:.75rem;color:#fff;opacity:0;transition:opacity .2s}
.masonry .item:hover .label{opacity:1}
@keyframes fadeIn{to{opacity:1}}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:100;display:flex;align-items:center;justify-content:center;cursor:pointer}
#lightbox.hidden{display:none}
#lightbox img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:4px}
#close{position:absolute;top:1.5rem;right:2rem;font-size:2rem;color:#fff;cursor:pointer;z-index:101}
#prev,#next{position:absolute;top:50%;transform:translateY(-50%);font-size:2.5rem;color:#fff;cursor:pointer;padding:1rem;z-index:101;user-select:none}
#prev{left:1rem}#next{right:1rem}
.loading{text-align:center;padding:4rem;color:var(--text2);grid-column:1/-1}

@media(max-width:1024px){.masonry{columns:3}}
@media(max-width:768px){.masonry{columns:2}}
@media(max-width:480px){.masonry{columns:1}}