@media (max-width: 768px) {
            .editor-layout {
                grid-template-columns: 1fr !important;
                gap: 1.5rem !important;
            }
            
            .editor-controls {
                order: 2;
                margin-top: 1rem;
            }
            
            .editor-main {
                order: 1;
            }
        }
        
        /* New styles for single box design */
        .editor-preview.drag-drop {
            cursor: pointer;
            border: 2px dashed #cbd5e0;
            transition: border-color 0.2s, background-color 0.2s;
            position: relative;
            min-height: 400px;
            max-width: 100%;
            overflow: hidden;
            background-color: #f8fafc; /* Light background for empty state */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .editor-preview.drag-drop:hover {
            border-color: #4299e1;
            background-color: #f7fafc;
        }
        
        .editor-preview.drag-drop.dragover {
            border-color: #4299e1;
            background-color: #ebf8ff;
            border-style: solid;
        }
        
        /* When image is loaded, use white background and center the image */
        .editor-preview.drag-drop.has-image {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            padding: 0;
        }
        
        .upload-instructions {
            text-align: center;
            padding: 2rem;
            color: #718096;
        }
        
        .upload-instructions h3 {
            color: #2d3748;
            margin-bottom: 0.5rem;
            font-size: 1.25rem;
        }
        
        .upload-instructions p {
            margin-bottom: 0.25rem;
            font-size: 0.875rem;
        }
        
        .upload-icon-large {
            font-size: 3rem;
            margin-bottom: 1rem;
            display: block;
        }
        
        .upload-button-container {
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem;
        }
        
        /* Fix for cropper to prevent dark backgrounds */
        .cropper-container {
            background: transparent !important;
        }
        
        .cropper-view-box {
            outline-color: rgba(66, 153, 225, 0.8) !important;
        }
        
        .cropper-face {
            background-color: transparent !important;
        }
        
        .cropper-line {
            background-color: #4299e1 !important;
        }
        
        .cropper-point {
            background-color: #4299e1 !important;
            border: 1px solid #ffffff;
        }
        
        /* Ensure image fills the container */
        #imagePreview {
            display: block;
            max-width: 100% !important;
            max-height: 100% !important;
            width: auto !important;
            height: auto !important;
        }
        
        /* Hide cropper's dark background */
        .cropper-bg {
            background: transparent !important;
        }
        
        .cropper-crop-box {
            background: transparent !important;
        }
        
        /* Make the cropper container take full space */
        .cropper-container.cropper-bg {
            background: transparent !important;
        }