/* Upload Area and Preview Styles */

/* Upload Area */
.upload-area {
    border: 2px dashed #333;
    border-radius: 8px;
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #1a1a1a;
}
.upload-area:hover { border-color: #555; background: #222; }
.upload-area.dragover { border-color: #fff; background: #2a2a2a; }
.upload-icon { font-size: 24px; margin-bottom: 10px; opacity: 0.5; color: #666; }
.upload-text { font-size: 12px; color: #666; }
.upload-text span { color: #fff; font-weight: 500; text-decoration: underline; }
#fileInput, #videoFileInput { display: none; }

/* Preview */
.preview-container { display: none; flex-direction: column; gap: 10px; }
.preview-container.visible { display: flex; }
.preview-image { width: 100%; height: 100px; object-fit: contain; background: #1a1a1a; border-radius: 4px; }
.image-info { font-family: 'Space Mono', monospace; font-size: 11px; color: #666; }

/* Camera Controls */
.camera-controls, .video-file-controls { display: none; flex-direction: column; gap: 10px; }
.camera-controls.visible, .video-file-controls.visible { display: flex; }

/* Video Playback */
.video-playback { display: none; gap: 8px; }
.video-playback.visible { display: flex; }