/* Universal image lightbox */
#imageLightbox { --bs-modal-bg: transparent; }
#imageLightbox .modal-content { background: transparent; border: none; }
#imageLightbox .lightbox-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; font-size: 2rem; color: #fff; background: rgba(0,0,0,0.5);
  border: none; border-radius: 50%; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
#imageLightbox .lightbox-nav-btn:hover { background: rgba(0,0,0,0.8); }
#imageLightbox .lightbox-prev { left: 10px; }
#imageLightbox .lightbox-next { right: 10px; }

body:has(#imageLightbox.show) > .modal-backdrop {
  opacity: 0.92 !important;
}

#imageLightbox .lightbox-dialogue-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.88) 40%);
  padding: 2.5rem 2rem 1rem;
  font-size: 1rem; font-style: italic; color: #f0f0f0;
  line-height: 1.5; text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* Star toggle button */
#imageLightbox .lightbox-star-btn {
    position: absolute;
    top: 10px;
    right: 50px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #444;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s;
    z-index: 10;
    padding: 0;
    line-height: 1;
}
#imageLightbox .lightbox-star-btn:hover {
    border-color: var(--color-accent-yellow);
    color: var(--color-accent-yellow);
}
#imageLightbox .lightbox-star-btn.starred {
    color: var(--color-accent-yellow);
    border-color: var(--color-accent-yellow);
}

/* Layer view buttons (foreground / contour) — top-left, same size as star */
#imageLightbox .lightbox-layer-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #444;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
    padding: 0;
}
#imageLightbox .lightbox-layer-btn:hover {
    border-color: var(--color-accent-blue);
    background: rgba(0, 0, 0, 0.8);
}

[data-lightbox-group] { cursor: pointer; }