#image-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        background-color: #eee; /* Light gray background for transparency/empty space */
        padding: 10px 0;
        border-radius: 8px;
    }

#main-img {
	max-width: 95%;   /* Slight buffer for margins */
	max-height: 75vh; /* Limits height to 75% of screen */
	height: auto;
	width: auto;
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	background-color: white; /* Contrast for plots with transparent backgrounds */
}
	
.compare-wrapper { display: flex; width: 100%; gap: 15px; padding: 10px; box-sizing: border-box; }
.viewer-panel { width: 50%; background: #fff; border: 1px solid #ccc; padding: 10px; border-radius: 5px; }

.sync-header { 
	background: #e9ecef; padding: 15px; text-align: center; 
	border-bottom: 2px solid #dee2e6; margin-bottom: 20px;
}

#img1, #img2 { 
	max-width: 100%; max-height: 70vh; 
	display: block; margin: 0 auto; object-fit: contain; 
}

.panel-nav { font-size: 0.9em; margin-bottom: 10px; color: #666; }
.panel-nav a { font-weight: bold; text-decoration: none; color: #007fae; }

.controls { margin-top: 15px; text-align: center; }
select { width: 90%; margin-bottom: 10px; }