body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background: #f9f9f9; }
header { background: #1a1a1a; color: #fff; padding: 2rem; text-align: center; }
nav button { margin: 0.5rem; padding: 0.5rem 1rem; cursor: pointer; background: #333; color: white; border: none; border-radius: 4px; }
nav button:hover { background: #555; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; padding: 20px; }
.item img { width: 100%; height: 250px; object-fit: cover; display: block; cursor: pointer; border-radius: 8px; transition: transform 0.3s ease; }
.item img:hover { transform: scale(1.03); }
.hidden { display: none !important; }
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.lightbox img { max-width: 90%; max-height: 90%; border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,0.5); }
.close { position: absolute; top: 30px; right: 40px; color: white; font-size: 40px; cursor: pointer; }
.close:hover { color: #ccc; }