.control-group { margin-bottom: 15px; }
        .control-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.85rem; color: var(--text-main); }
        .control-group select, .control-group input[type="range"] { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.9rem; }
        
        /* Área de Arrastar e Soltar (Dropzone) */
        .dropzone {
            border: 2px dashed var(--border-color);
            padding: 25px;
            text-align: center;
            border-radius: 8px;
            background: #fafafa;
            cursor: pointer;
            transition: background 0.2s, border-color 0.2s;
            margin-bottom: 15px;
        }
        .dropzone:hover, .dropzone.dragover { background: #f1f5f9; border-color: var(--primary-color); }
        .dropzone p { font-size: 0.85rem; color: var(--text-muted); margin-top: 5px; }

        .file-input { display: none; }

        .action-btn { width: 100%; background-color: var(--primary-color); color: white; border: none; border-radius: 8px; padding: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; margin-top: 10px; }
        .action-btn:hover { background-color: var(--primary-hover); }
        .action-btn:disabled { background-color: #cbd5e1; cursor: not-allowed; }

        /* Painel de Visualização */
        .preview-panel { background: #fff; flex: 1; padding: 25px; border-radius: var(--radius); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); border: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; justify-content: center; }
        
        .image-preview-container {
            width: 100%;
            height: 250px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%), 
                              linear-gradient(-45deg, #f1f5f9 25%, transparent 25%), 
                              linear-gradient(45deg, transparent 75%, #f1f5f9 75%), 
                              linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
            background-size: 16px 16px;
            background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
            position: relative;
        }

        #imagePreview { max-width: 100%; max-height: 100%; object-fit: contain; display: none; }
        .preview-placeholder { color: var(--text-muted); font-size: 0.85rem; text-align: center; }
        
        .file-info { font-size: 0.8rem; color: var(--text-muted); margin-top: 12px; text-align: center; }

        @media (max-width: 768px) { .main-container { flex-direction: column; } }