.lightbox{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,.95);
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.lightbox.active{opacity:1;visibility:visible}

.lightbox-close{
  position:absolute;
  top:1.5rem;right:1.5rem;
  width:44px;height:44px;
  background:rgba(255,255,255,.1);
  border:none;border-radius:50%;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, transform .2s ease;
  z-index:10001;
}
.lightbox-close:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}
.lightbox-close svg{width:20px;height:20px;color:#fff}

.lightbox-nav{
  position:absolute;top:50%;
  transform:translateY(-50%);
  width:50px;height:50px;
  background:rgba(255,255,255,.1);
  border:none;border-radius:50%;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, transform .2s ease;
  z-index:10001;
}
.lightbox-nav:hover{
  background:rgba(255,255,255,.2);
  transform:translateY(-50%) scale(1.1);
}
.lightbox-nav svg{width:24px;height:24px;color:#fff}
.lightbox-prev{left:1.5rem}
.lightbox-next{right:1.5rem}

.lightbox-content{
  max-width:90vw;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.lightbox-content img{
  max-width:100%;
  max-height:75vh;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-caption{
  color:rgba(255,255,255,.8);
  font-size:.9rem;
  margin-top:1rem;
  text-align:center;
  max-width:600px;
}
.lightbox-counter{
  position:absolute;
  bottom:1.5rem;left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.6);
  font-size:.85rem;
  font-family:var(--font-mono);
}