:root{ --bg:#111; --card:#171717; --muted:#cfd8e3; --accent:#fff }
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial; margin:0; background:linear-gradient(180deg,#111,#0d0d0d); color:var(--muted); padding:1.5rem}
.g-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.g-header .back{color:var(--muted);text-decoration:none}
h1{margin:0;font-size:1.25rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.thumb{display:block;position:relative;overflow:hidden;border-radius:8px;background:var(--card);text-decoration:none;color:inherit}
.thumb img{width:100%;height:160px;object-fit:cover;display:block;transition:transform .28s ease}
.thumb:hover img{transform:scale(1.05)}
.caption{position:absolute;left:0;right:0;bottom:0;padding:.5rem .6rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.5));font-size:.85rem}
.muted{color:var(--muted)}

/* lightbox */
.lightbox{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,0.85);visibility:hidden;opacity:0;transition:opacity .18s ease;z-index:60}
.lightbox.open{visibility:visible;opacity:1}
.lb-close{position:absolute;right:1rem;top:1rem;background:transparent;border:0;color:#fff;font-size:1.4rem;cursor:pointer}
.lb-caption{color:#fff;margin-top:.5rem}
#lbImg{max-width:90vw;max-height:80vh;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,0.6)}

/* responsive */
@media (max-width:520px){ .thumb img{height:120px} }